<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.1.3.pack.js"></script>
</head>
<body>
<table id="tableBody" name="tableBody" border='1'>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr id="trBody" name="trBody">
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
</table>
<input type="button" onClick="addTr();" value="add" />
</body>
<script type="text/javascript">
function addTr(){
//使用克隆的方法动态创建表格
var trClone = $("#trBody").clone(true);
trClone.find("#1").text("1");
trClone.find("#2").text("2");
trClone.find("#3").text("3");
trClone.find("#3").bind("click",function(){deleteTr(this)});
trClone.attr("id","trnum");
trClone.appendTo("#tableBody");
}
function deleteTr(elemt){
//获取要删除行的对象后调用删除方法remove()
$(elemt).parent().remove();
}
</script>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
