jquery操作表格(添加/删除行、添加/删除列)

最新推荐文章于 2019-07-13 18:33:27 发布

xiaoping8411

最新推荐文章于 2019-07-13 18:33:27 发布

阅读量1w

点赞数 1

分类专栏： jquery 文章标签： jquery function class button xhtml javascript

本文链接：https://blog.csdn.net/xiaoping8411/article/details/6799015

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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="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 class="tr_'+tableCount+'"><td class="cl1">'+tableCount+'</td><td class="cl1">内容'+tableCount+'</td><td class="cl1"><a href="javascript:void(0)" οnclick=del('+tableCount+');>删除</a></td></tr>';
$("#testTable tbody").append(addRowTemplete);
}
function addCol(){
$("#testTable tr").each(function(){
var trHtml = "<td οnclick='delCol("+colCount+")'>曾加的td</td>";
$(this).append(trHtml);
});
}
function delCol(_id){
$("#testTable tr").each(function(){
$("td:eq("+_id+")",this).hide();
});
}

</script>
</head>
<body>
<table width="487" border="1" id="testTable">
<tr>
<td οnclick="delCol(0)">序号</td>
<td οnclick="delCol(1)">内容</td>
<td οnclick="delCol(2)">操作</td>
</tr>
</table>
<p>
<input type="button" name="Submit" value="添加行" οnclick="addRow()" />
<input type="button" name="Submit2" value="添加列" οnclick="addCol()"/>
</p>
</body>

</html>

xiaoping8411

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery操作表格(添加/删除行、添加/删除列)

jquery操作表格测试function del(_id){$("#testTable .tr_"+_id).html('');var tableTr = $("#testTable .tr_"+_id).hide();}function addRow()
复制链接

扫一扫