如何通过jquery动态给表格添加一行

比如设置table的id为tab

var

trHTML

=

"<tr><td>...</td></tr>"

$("#tab").append(trHTML)//在table最后面添加一行

$("#tab

tr:eq(2)").after(trHTML)

//

在table的第3行后面添加一行

这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var

trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行

$(function()

{

$(":button").click(function()

{

var

tr

=

"<tr><td>new</td></tr>"

//$("table").append(tr)

$("table

tr:eq(2)").after(tr)

})

})

这是我测试用的代码，你可以运行看看

可以在表单中使用table 然后对table进行动态的添加。

／／监听添加表格行数的阿按扭

$(document).ready(function(){

$("#but").click(function(){

var $table=$("#tab tr")

var len=$table.length

$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'><img width=\'140\' src=\'images/1.jpg\'></td><td align=\'center\'><a href=\'javascript:void(0)\' onclick=\'deltr("+(len+1)+")\'>删除</a></td></tr&gt")

})

})

／／删除指定的表格的行

function deltr(index)

{

$table=$("#tab tr")

$("tr[id=\'"+index+"\']").remove()

}

以下写在body中即可

//添加按钮

<input id="but" type="button" value="添加" />

//空的表格

<table class="print_product_img" id="tab" border="1" width="60%" align="center">

</table>

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

假设，我们有这样一个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实例：表格里点击按钮后添加一行，新添加的行附带删除按钮

---