利用jquery给指定的table添加一行、删除一行
复制代码 代码如下:
<script language="javascript" src="https://www.jb51.net/article/jquery.js"></script>
<table cellpadding="0" cellspacing="0">
<tr><td>1</td>
<td>2</td>
<td>3</td></tr>
<tr><td>11</td>
<td>22</td>
<td>33</td></tr>
</table>
<table cellpadding="0" cellspacing="0"> <tr><td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<input type="button" value="add">
<input type="button" value="del">
<script> //在id为test的table的最后增加一行
function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");
tr_id++; //alert(tr_id);
str = "<tr id = '"+tr_id+"'><td>re1</td><td>re2</td><td>re3</td></tr>";
$('#'+id).append(str); } //删除id为test的table的最后一行
function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#'+tr_id).remove();
}
</script>
jQuery动态添加删除表格的行和列
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css"> .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } </style>
<script type="text/javascript" src="https://www.jb51.net/css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var rowCount = 0;
var colCount = 2;
function addRow(){ rowCount++; var rowTemplate = '<tr><td>'+rowCount+'</td><td>内容'+rowCount+'</td><td><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';
var tableHtml = $("#testTable tbody").html();
tableHtml += rowTemplate; $("#testTable tbody").html(tableHtml); }
function delRow(_id){ $("#testTable .tr_"+_id).hide(); rowCount--; }
function addCol(){ colCount++; $("#testTable tr").each(function(){
var trHtml = $(this).html(); trHtml += '<td>增加的td</td>';
$(this).html(trHtml);
});
}
function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); });
colCount--;
}
function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl1");
$("td:eq("+_id+")",this).addClass("cl2"); }); }
function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl2");
$("td:eq("+_id+")",this).addClass("cl1"); }); } </script>
<title>jquery操作表格测试</title>
</head>
<body>
<table> <tr>
<td>序号</td> <td>内容</td>
<td>操作</td> </tr>
</table>
<input type="button" value="添加行"/>
<input type="button" value="添加列"/>
</body>
jquery操作表格(添加/删除行、添加/删除列)
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="https://www.jb51.net/jquery-1.4.4.min.js"></script>
<title>jquery操作表格测试</title>
<script type="text/javascript">
function del(_id){ $("#testTable .tr_"+_id).html('');
var tableTr = $("#testTable .tr_"+_id).hide(); }
function addRow(){ var addRowTemplete = '<tr>
<td>'+tableCount+'</td><td>内容'+tableCount+'</td>
<td><a href="javascript:void(0)" onclick=del('+tableCount+');>删除</a></td></tr>'; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){ var trHtml = "<td>曾加的td</td>"; $(this).append(trHtml); }); } function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); }); }
</script> </head>
<body>
<table> <tr> <td>序号</td> <td>内容</td> <td>操作</td> </tr> </table> <p> <input type="button" value="添加行" /> <input type="button" value="添加列"/> </p> </body>
</html>
复制代码 代码如下: