JQUERY方法给TABLE动态增加行
1、首先输入下方的代码：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>利用jquery给指定的table添加一行、删除一行</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.5.1.js"></script>
<script type="text/javascript">
2、然后在输入下方的代码：
////////添加一行、删除一行封装方法///////
/**
* 为table指定行添加一行
*
* tab 表id
* row 行数，如：0->第一行 1->第二行 -2->倒数第二行 -1->最后一行
* trHtml 添加行的html代码
*
*/
function addTr(tab, row, trHtml){
//获取table最后一行 $("#tab tr:last")
//获取table第一行 $("#tab tr").eq(0)
//获取table倒数第二行 $("#tab tr").eq(-2)
var $tr=$("#"+tab+" tr").eq(row);
if($tr.size()==0){
alert("指定的table id或行数不存在！");
return;
}
$tr.after(trHtml);
}
3、然后在输入下方的代码：
function delTr(ckb){
//获取选中的复选框，然后循环遍历删除
var ckbs=$("input[name="+ckb+"]:checked");
if(ckbs.size()==0){
alert("要删除指定行，需选中要删除的行！");
return;
}
ckbs.each(function(){
$(this).parent().parent().remove();
});
}
/**
* 全选
*
* allCkb 全选复选框的id
* items 复选框的name
*/
function allCheck(allCkb, items){
$("#"+allCkb).click(function(){
$('[name='+items+']:checkbox').attr("checked", this.checked );
});
}
////////添加一行、删除一行测试方法///////
$(function(){
//全选
allCheck("allCkb", "ckb");
});
function addTr2(tab, row){
var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/>
</td><td width='30%'>地理</td><td width='30%'>60</td></tr>";
addTr(tab, row, trHtml);
}
function delTr2(){
delTr('ckb');
}
4、然后输入下方的代码：
</script>
</head>
<body>
<table border="1px #ooo" id="tab" cellpadding="0"
cellspacing="0" width="30%">
<tr align="center">
<td width="30%"><input id="allCkb" type="checkbox"/></td>
<td width="30%">科目</td>
<td width="30%">成绩</td>
</tr>
<tr align="center">
<td width="30%"></td>
<td width="30%">语文</td>
<td width="30%">80</td>
</tr>
</table>
<input type="button" onclick="addTr2('tab', -1)" value="添加">
<input type="button" onclick="delTr2()" value="删除">
</body>
</html>
5、然后这样就完成了。
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);
});
});
这是我测试用的代码，你可以运行看看
var vTr= "<tr><td>text</td></tr>"
$table.append(vTr);
$(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" style="border-collapse: collapse;border-width:0px; border-style:hidden;">';
$.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" style="border-collapse: collapse;border-width:0px; border-style:hidden;">');
//$.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" style="border-collapse: collapse;border-width:0px; border-style:hidden;">';
$.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" style="border-collapse: collapse;border-width:0px; border-style:hidden;">');
//$.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
});
动态插入一行：
//在表格的末尾添加一行
$("#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种常用的操作！
