<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>
<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>
转载请注明原文地址: https://ju.6miu.com/read-972044.html
