JavaScript DOM操作之表格操作(2)
来源：互联网 发布：java实现断点续传 编辑：程序博客网 时间：2024/05/29 14:26
*DOM操作表格--(添加删除元素)
*是在tBodies里面添加元素
*/
HTML文件代码
<!DOCTYPE html>
<html>
<head>
<title>domTableOperate.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/domTableOperate.js"></script>
</head>
<body>
NAME:<input type="text" id="name" width="300px" style="margin-top:50px;">
AGE:<input type="text" id="age">
<input type="button" value="ADDRow" id="btn"><br/>
<table border="1" width="500px;" id="tab1">
<thead>
<tr>
<td>ID</td>
<td>NAME</td>
<td>AGE</td>
<td>OPERATE</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>wsm</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>ali</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>lisi</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>alid</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>skd</td>
<td>33</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>sawm</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>8</td>
<td>tim</td>
<td>20</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
js文件代码
window.onload = function(){
var table1 = document.getElementById('tab1');
var name = document.getElementById('name');
var age = document.getElementById('age');
var btn = document.getElementById('btn');
var id = table1.tBodies[0].rows.length+1;
btn.onclick = function(){
if(name.value.length> 0 && age.value.length> 0){
var otr = document.createElement('tr');
var otd = document.createElement('td');
otd.innerHTML = id++;
otr.appendChild(otd);
var otd = document.createElement('td');
otd.innerHTML = name.value;
otr.appendChild(otd);
var otd = document.createElement('td');
otd.innerHTML = age.value;
otr.appendChild(otd);
var otd = document.createElement('td');
otd.innerHTML = '<a href="javascript:;">remove</a>';
otr.appendChild(otd);
otd.getElementsByTagName('a')[0].onclick = function(){
table1.tBodies[0].removeChild(this.parentNode.parentNode);
}
table1.tBodies[0].appendChild(otr);
age.value = '';
name.value = '';
}else{
alert("Please fill in NAME and AGE!");
}
};
}
- JavaScript DOM操作之表格操作(2)
- Javascript之DOM(表格操作)
- JavaScript DOM操作之表格操作(3)
- JavaScript DOM操作之表格操作(4)
- 【JavaScript】DOM操作表格
- JavaScript实战-DOM操作之奇偶变色表格2
- JavaScript DOM操作表格案例
- JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
- JavaScript实战-DOM操作之奇偶变色表格
- javascript之DOM操作
- javascript之DOM操作
- javascript之DOM操作
- javascript之DOM操作
- javascript之DOM操作
- javascript之DOM操作
- javascript之DOM操作
- javascript之DOM操作
- javascript之DOM操作
- windows3.0与OS/2兼容的DIB（BITMAPCOREHEADER结构解析）
- 最近生活感悟，我的选择与被选择
- Linux 下的网络负载监控工具
- 在Python中如何使用Linux的epoll
- Android Activity的生命周期
- JavaScript DOM操作之表格操作(2)
- ubuntu下安装apache5、php5、mysql、phpmyadmin【非原创】
- Android 沉浸式全屏的实现方法
- Package main extends undefined package struts-default的解决方案
- 用vs2010打开项目,或许直接打开,会提示C:/Users/Administrator/AppData/Roaming/Microsoft/VisualStudio/10.0/ActivityLog
- FreeMaker的使用
- AM335x(TQ335x)学习笔记——LCD驱动移植
- QT数据库总结
- Duilib 弹出菜单
