用JS在添加一行那里往下添加那一行并且可以删除求高手

2024-12-02 05:53:24

推荐回答（3个）

回答1：

window.onload = function () {
    const params = document.getElementById('params');
    const ul = params.querySelector('ul');
    const addBtn = ul.querySelector('#add');
    addBtn.onclick = function (e) {
        const newli = document.createElement('li');
        newli.appendChild(document.createElement('input'));
        const btn = document.createElement('input');
        btn.setAttribute('type', 'button');
        btn.setAttribute('value', '删除');
        btn.setAttribute('opt-type', 'del');
        newli.appendChild(btn);
        ul.appendChild(newli);
    }

    ul.onclick = function (e) {
        const target = e.target;
        const optType = target.getAttribute('opt-type')
        if (target.nodeName === 'INPUT' && target.type === 'button' && optType === 'del') {
            this.removeChild(target.parentNode)
        }
    }
}

点击"添加一行"，生成一条li，包含input，然后append进ul里边。点击删除，用ul删除按钮父元素li。

回答2：

点击添加一行按钮，克隆该行。通过append Child添加刚刚克隆的元素，你这里可能要改
Dom结构。
克隆的元素移除添加一行按钮，新增删除按钮，添加点击事件:获取父元素tr并移除。

回答3：

你想直接要代码的话，首先你得把你的源码截图出来，你只截图了个前台页面，别人想给你源码，也不好给你。

所以只好给你一个简单的功能代码：

用jquery吧，方便一些，点击按钮后，复制当前行的内容，再新加一行：

$("button#add").on("click",function(){
    var $tr=$(this).parent("tr");//这是获取按钮所在的当前行
    var $ntr=$tr.clone();//这句是复制一行
    $ntr.find("button").remove();//这一行是删除复制来的这一行里的button按钮
    //下面这一行是给它重新添加一个删除当前行的按钮
    $ntr.append('删除当前行');
    $ntr.insertAfter($tr);//这一句是把生成的新行添加到当前行的后面
    //到这里，已经完成了添加行的功能，
    //现在要做的是为新添加行的按钮添加一个删除当前行的功能
    $ntr.find("button.deltr").on("click",function(){
        var $this=$(this).parent("tr");
        $this.remove();
    });    
});

其它在给新添加的行添加“删除”功能时，用jquery里的“预添加”功能最方便，可以参考下面这篇文章：

jquery里给未来元素[动态添加的元素]绑定事件的方法

另外这里有一篇添加一行和删除一行的在线实例，你可以参考一下：

jquery实例：表格里点击按钮后添加一行，新添加的行附带删除按钮

用JS在添加一行那里 往下添加那一行并且可以删除 求高手

用JS在添加一行那里往下添加那一行并且可以删除求高手