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

2014-03-31 34

<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文章

AngularJS内置指令
Feb 04 93
整理AngularJS中的一些常用指令
Jun 16 43
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 46
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 42
Vue.js实战之组件之间的数据传递
Apr 01 49
改变layer confirm弹窗按钮的颜色方法
Sep 12 56
Layui表格行工具事件与数据回填方法
Sep 13 54
手机访问当前页面