点击删除或者添加表格行简单代码实例:
在很多实际应用中，都有这样的功能，点击可以删除或者添加一行，下面就是一段能够实现此功能的代码实例，非常的简单，如果想要在实际中应用的话，还需要进一步的完善，当然这里只是演示一下如何实现此功能。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function $c(tagname){
return document.createElement(tagname);
}
$(document).ready(function(){
$("#addrow").bind("click",function(){
var tab=$("#tab");
var tr=$c("tr");
tab.append(tr);
var oLtd=$c("td");
oLtd.innerHTML="蚂蚁部落三";
tr.appendChild(oLtd);
var oRtd=$c("td");
oRtd.innerHTML="蚂蚁部落四";
tr.appendChild(oRtd);
})
$("#deleterow").bind("click",function(){
var tab = $("#tab tr:eq(0)");
tab.remove();
});
});
</script>
</head>
<body>
<table border='1' id="tab">
<tr>
<td>蚂蚁部落一</td>
<td>蚂蚁部落二</td>
</tr>
</table>
<input type="button" id="addrow" value="添加一行"/>
<input type="button" id="deleterow" value="删除一行"/>
</body>
</html>
以上代码实现了我们的要求，点击能够添加或者删除一行，下面简单介绍一下它的实现过程。
一.代码注释:
1.function $c(tagname){return document.createElement(tagname)}，创建一个指定的对象元素，参数为标签名称，例如"td"。
2.$(document).ready(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
3.$("#addrow").bind("click",function(){})，为按钮注册click事件处理函数。
4.var tab=$("#tab")，获取table对象。
5.var tr=$c("tr")，创建一个tr对象。
6.tab.append(tr)，给table追加一个tr行。
7.var oLtd=$c("td")，创建一个td单元格对象。
8.oLtd.innerHTML="蚂蚁部落三"，设置单元格的内容。
9.tr.appendChild(oLtd)，为tr追加一个td单元格。
10.var oRtd=$c("td")，创建一个td单元格对象。
11.oRtd.innerHTML="蚂蚁部落四"，设置td单元格的内容。
12.tr.appendChild(oRtd)，为tr行追加一个td单元格。
13.$("#deleterow").bind("click",function(){})，为按钮注册一个click事件处理函数。
14var tab = $("#tab tr:eq(0)")，获取表格的第一行。
15.tab.remove()，删除此行。
二.相关阅读:
1.document.createElement()函数可以参阅js的createElement()和appendChild()函数的作用一章节。
2.bind()可以参阅jQuery的bind()方法一章节。
3.append()函数可以参阅jQuery的append()方法一章节。
4.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
5.:eq选择器可以参阅jQuery的:eq()选择器一章节。
6.remove()函数可以参阅jQuery的remove()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12995
更多内容可以参阅:http://www.softwhy.com/jquery/