JQUERY方法给TABLE动态增加行

JQUERY方法给TABLE动态增加行

比如设置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").append('<tr><td>new</td><td>new</td></tr>');     //在表格的开头添加一行     $("#table").prepend('<tr><td>new</td><td>new</td></tr>');  //在表格的第二行后面插入一行   $("#table tr").eq(1).after('<tr><td>new</td><td>new</td></tr>');动态插入一列： //在表格的末尾添加一列    $("#table tr").append('<td>newTD</td>');    //在表格的开头添加一列    $("#table tr").prepend('<td>newTD</td>');    //在表格的第二列后添加一列    $("#table tr td:nth-child(2)").after('<td>newTD</td>');更多的看这里 ：网页链接 非常全 共15种常用的操作！

$(function(){ //注释是不对的 $.getJSON( "/homeofcar/user/getjson", function(data) { var list = data; //循环 $.each(list,function(i,user){ //构建行 var $tr = $("<tr></tr>"); //复选框 $tr.append('<td><input type="checkbox"/></td>'); //用户 $tr.append("<td>"+user.realname+"</td>"); //角色 var juese = '<td><table cellspacing="0" cellpadding="0" border="1" ; $.each(user.listRole,function(j,role){ juese = juese + "<tr><td>"+role.rolename+"</td></tr>"; }); juese+="</table></td>"; $tr.append(juese); //$tr.append('<td><table cellspacing="0" cellpadding="0" border="1" ); //$.each(user.listRole,function(j,role){ //$tr.append("<tr><td>"+role.rolename+"</td></tr>"); //}); //$tr.append("</table></td>"); //权限 var quanxian = '<td><table cellspacing="0" cellpadding="0" border="1" ; $.each(user.listRole,function(j,role){ quanxian+="<tr><td>"; $.each(role.listModule,function(k,module){ quanxian+=module.modulename; }); quanxian+="</td></tr>"; }); quanxian+="</table></td>"; $tr.append(quanxian); //$tr.append('<td><table cellspacing="0" cellpadding="0" border="1" ); //$.each(user.listRole,function(j,role){ //$tr.append("<tr><td>"); //$.each(role.listModule,function(k,module){ //$tr.append(" "+module.modulename); //}); //$tr.append("</td></tr>"); //}); //$tr.append("</table></td>"); //编辑 $tr.append("<td>编辑</td>"); //构建行追加 $("#tablemax").append($tr); }); });//getJSON });

var $table= $("#tableObj"); var vTr= "<tr><td>text</td></tr>" $table.append(vTr);

jquery clone方法实现动态增加行和删除行<br><br>//待克隆的div<br><div class="servicelist-sel-body"><br> <div id="serviceid0"   name="divname" >  <br>    <select id="service_select_id"  name="serviceid" class="serviceselect"  color: blue;'>删除</span>");<br><br>    //修改时候用到<br>    if(flag==2){<br>    newrow.find("select.serviceselect").val(service_id);<br>    newrow.find("input.servicerate").val(service_rate);<br>    newrow.find("input.dividerate").val(divide_rate);    <br>    } <br>    //查看时候用到<br>    if(flag==3){<br>    //alert(service_id+" | "+service_rate+" | "+divide_rate); <br>    newrow.find("select.serviceselect_view").val(service_id);<br>    newrow.find("input.servicerate_view").val(service_rate);<br>    newrow.find("input.dividerate_view").val(divide_rate);    <br>    } <br> //显示克隆出的新行数据<br>  newrow.show();<br>    idnum++;//克隆一次加一次<br>} <br><br>//动态删除行<br>function delrow(who) {<br>  $("#" + who.id).remove();<br> }