<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格应用2</title>
<style type="text/css">
table{
width:300px;
margin-top:10px;
border:1px solid;
}
td{
border:1px solid;
padding:3px;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var name=document.getElementById('name');
var age=document.getElementById('age');
var bt1=document.getElementById('bt1');
var oTab=document.getElementsByTagName('table')[0];
var tBody=oTab.tBodies[0];
bt1.onclick=function(){
var newTr=document.createElement('tr');
var newTd=document.createElement('td');
newTd.innerHTML=tBody.rows.length+1;
newTr.appendChild(newTd);
var newTd=document.createElement('td');
newTd.innerHTML=name.value;
newTr.appendChild(newTd);
var newTd=document.createElement('td');
newTd.innerHTML=age.value;
newTr.appendChild(newTd);
var newTd=document.createElement('td');
/*var newA=document.createElement('a');
/* 添加了下面这一行就运行不了,为什么？
newA.innerHTML='删除'；
newTd.appendChild(newA);*/
newTd.innerHTML='<a href="javascript:;">删除</a>';
newTr.appendChild(newTd);
tBody.appendChild(newTr);
}
}
</script>
姓名：<input id="name" type="text">
年龄：<input id="age" type="text">
<button id="bt1">添加</button>
<table>
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tom</td>
<td>13</td>
<td><a href='javascript:;'>删除</a></td>
</tr>
<tr>
<td>2</td>
<td>Jerry</td>
<td>36</td>
<td><a href='javascript:;'>删除</a></td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>22</td>
<td><a href='javascript:;'>删除</a></td>
</tr>
<tr>
<td>4</td>
<td>张健康</td>
<td>43</td>
<td><a href='javascript:;'>删除</a></td>
</tr>
<tr>
<td>5</td>
<td>Lily</td>
<td>21</td>
<td><a href='javascript:;'>删除</a></td>
</tr>
<tr>
<td>6</td>
<td>马三</td>
<td>28</td>
<td><a href='javascript:;'>删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
添加回答
举报
0/150
提交
取消