jquery里怎么用clone给表格增加一行

你想要的效果是，表格的每一行后面有个“添加”按钮，点击按钮后，会自动复制当前行，添加到当前行的后面，这个效果吧？

假设，我们有这样一个table表格：

<table id="table">

    <tr>

        <td>内容1</td>

        <td>

            <button class="addtr">添加</button>

            <button class="deltr">删除</button>

        </td>

    <tr>

</table>

用jquery来实现“添加”和“删除”的功能：

下面这个是添加：

$("#table").on("click","button.addtr",function(){

    var $tr=$(this).parents("tr")

    $tr.append($tr.clone())

})

下面是删除：

$("#table").on("click","button.deltr",function(){

    var $tr=$(this).parents("tr")

    $tr.remove()

})

可以参考这里，有完整的在线实例演示：

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

table表任意复制一行的关键是复制哪行，插入到什么位置，如何插入。

第 一个问题复制哪行，通常是点击某一行以确定复制的当前行，核心代码如下：

var e = window.event

if (e.target) targ = e.target

else if (e.srcElement) targ = e.srcElement

if (targ.nodeType == 3)

targ = targ.parentNode

if(targ.tagName=="TD")

第 二个问题插入位置，通常是点击行的下面

pos = targ.parentNode.rowIndex+1

也有可能在表头首行pos =0

再就是表尾"beforeEnd"

第三个问题如何插入,先复制当前行：

var con = targ.parentNode.cloneNode(true)

再进行插入，可以是insertRow，也可以是insertAdjacentElement：

var x=document.getElementById('myTable').insertRow(pos)；

document.getElementById('myTable').insertAdjacentElement("beforeEnd",con)

复制之后可对复制行里的内容进行修改调整：

var y=x.insertCell(0).innerHTML=document.getElementById("cell1").value

也可进行删除指定行：

document.getElementById('myTable').removeChild(Obj.parentNode.rows[i])

---