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

2014-03-31 20

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

Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 21
Extjs学习笔记之六 面版
Jan 08 19
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 18
解析jquery easyui tree异步加载子节点问题
Mar 08 24
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 28
新手快速入门JavaScript装饰者模式与AOP
Jun 24 21
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 26
手机访问当前页面