js简单的表格添加行和删除行操作示例

2014-03-31 6

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
//创建一个html元素 
function $c(tagname){ 
return document.createElement(tagname); 
} 
//文档加载完成后要执行的内容 
$(document).ready(function(){ 
//绑定添加行按钮的单击事件 
$("#addrow").bind("click",function(){ 
// 取得table 
var tab = $("#tab"); 
// 创建tr元素 
var tr = $c("tr"); 
// 为table追加tr元素 
tab.append(tr); 
// 创建td元素 
var td1=$c("td"); 
// td元素的内容 
td1.innerHTML="insert1"; 
// 为新追加的tr追加td元素 
tr.appendChild(td1); 
var td2=$c("td"); 
td2.innerHTML="insert2"; 
tr.appendChild(td2); 
}); 
// 绑定删除行按钮的单击事件 
$("#deleterow").bind("click",function(){ 
// 取得table的第一行 
var tab = $("#tab tr:eq(0)"); 
// 删除此行 
tab.remove(); 
}); 
}); 
</script> 
</head> 
<body> 
<table border='1' id="tab"> 
<tr> 
<td>123</td> 
<td>456</td> 
</tr> 
</table> 
</br> 
<button id="addrow">添加行</button> 
<button id="deleterow">删除行</button> 
</body> 
</html>
展开阅读全文

更多Javascript文章

Javascript连接多个数组不用concat来解决
Mar 24 9
Web打印解决方案之普通报表打印功能
Aug 29 8
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 10
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 10
jQuery实现碰到边缘反弹的动画效果
Feb 24 7
处理JavaScript值为undefined的7个小技巧
Jul 28 9
JavaScript实现4位随机验证码的生成
Jan 28 25
手机访问当前页面