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、然后这样就完成了。

温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2017-12-15
比如设置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);
});
});
这是我测试用的代码,你可以运行看看本回答被提问者采纳
第2个回答  2012-01-17
var $table= $("#tableObj");
var vTr= "<tr><td>text</td></tr>"
$table.append(vTr);
第3个回答  2018-07-11
$(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
});

第4个回答  2018-06-14

动态插入一行:

//在表格的末尾添加一行   
$("#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种常用的操作!