动态删除表格的行和列
<!DOCTYPE html >
<html >
<head>
<meta charset="UTF-8
" />
<style >
.cl1{
background-color:#FFFFFF;
}
.cl2{
background-color:#FFFF99;
}
</style>
<script src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script>
var rowCount = 0;
var colCount = 2;
function addRow(){
rowCount++;
var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1">内容'+rowCount+'</td><td class="cl1"><a href="#" οnclick=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 οnclick="delCol('+colCount+')">增加的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 id="testTable" border="1" width="500">
<tr>
<td>序号</td>
<td οnmοuseοver="mover(1);" οnmοuseοut="mout(1);">内容</td>
<td οnmοuseοver="mover(2);" οnmοuseοut="mout(2);">操作</td>
</tr>
</table>
<input type="button" value="添加行" οnclick="addRow();"/>
<input type="button" value="添加列" οnclick="addCol();"/>
</body>
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
