<html>
<head>
<meta charset="utf-8"/>
<title>JavaScript实例</title>
<style>
select,option,div,button{margin:0px;padding:0px;}
#lid,#rid,div{
width:80px;
height:260px;
float:left;
}
div{
text-align:center;
padding-top:60px;
}
</style>
</head>
<body>
<!-- html注释 -->
<h2>JavaScript实例:HTML DOM 中table</h2>
<table id="tid" width="500" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<h2>添加学生信息</h2>
<form action="#" name="myform" onsubmit="return doAdd()">
学号:<input type="text" name="sno"/><br/><br/>
姓名:<input type="text" name="name"/><br/><br/>
性别:<input type="text" name="sex"/><br/><br/>
年龄:<input type="text" name="age"/><br/><br/>
<input type="submit" value="添加"/>
</form>
<script type="text/javascript">
//执行删除的方法
function dodel(bt){
//获取表格节点
var tab = document.getElementById("tid");
tab.deleteRow(bt.parentNode.parentNode.rowIndex);
}
//执行添加
function doAdd(){
//获取表单信息
var sno = document.myform.sno.value;
var name = document.myform.name.value;
var sex = document.myform.sex.value;
var age = document.myform.age.value;
//获取表格并申请添加一行
var row = document.getElementById("tid").insertRow();
//为当前行添加一个个字段
row.insertCell(0).innerHTML = sno;
row.insertCell(1).innerHTML = name;
row.insertCell(2).innerHTML = sex;
row.insertCell(3).innerHTML = age;
row.insertCell(4).innerHTML = '<button onclick="dodel(this)">删除</button>';
//当前表单清空
document.myform.reset();
return false;
}
</script>
</body>
</html>
JavaScript实现表格的添加和删除
最新推荐文章于 2024-04-29 23:01:06 发布