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

齐晓威_518

浏览: 618745 次
性别:
来自: 郑州

最近访客更多访客>>

huangsheng2012

cr135810

ws07

gaochunhu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery使用心得与体会

利用jquery给指定的table添加一行、删除一行

<script language="javascript" src="./jquery.js"></script>

jQuery动态添加删除表格的行和列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.cl1{

background-color:#FFFFFF;

}

.cl2{

background-color:#FFFF99;

}

</style>

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="#" 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 onclick="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>

<tr>

</tr>

</table>

</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="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)" onclick=del('+tableCount+');>删除</a></td></tr>';
$("#testTable tbody").append(addRowTemplete);
}
function addCol(){
$("#testTable tr").each(function(){
var trHtml = "<td onclick='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 onclick="delCol(0)">序号</td>
<td onclick="delCol(1)">内容</td>
<td onclick="delCol(2)">操作</td>
</tr>
</table>
<p>
<input type="button" name="Submit" value="添加行" onclick="addRow()" />
<input type="button" name="Submit2" value="添加列" onclick="addCol()"/>
</p>
</body>