案例：table
来自CloudWiki
<!DOCTYPE html> <html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>table</title>
<link rel="stylesheet" href="">
<style>
tr{
height:40px;
}
td{
text-align:center;
}
</style>
</head> <body>
| 序号 | 姓名 | 联系方式 | 操作 |
|---|---|---|---|
| 1 | 张三水 | 13934457214 |
<input type="button" value="删除" onclick="del(this)"> |
| 2 | 张三 | 12345678911 |
<input type="button" value="删除" onclick="del(this)"> |
| 3 | 杨雪 | 13835438942 |
<input type="button" value="删除" onclick="del(this)"> |
<input type="button" value="添加一行" onclick="add()">
<script>
var tab=document.getElementsByTagName("table")[0];
function add(){
var tr=tab.rows;
var td=tr[0].cells;
var trNew=document.createElement("tr");
for(var i=0;i<td.length;i++){
var tdNew=document.createElement("td");
if(i==0){
tdNew.innerText=tr.length;
}
if(i==td.length-1){
tdNew.innerHTML="<input type='button' value='删除'>"
}
trNew.appendChild(tdNew);
}
tab.appendChild(trNew);
}
function del(a){
var tBody=tab.getElementsByTagName("tbody")[0];
tBody.removeChild(a.parentNode.parentNode);
}
</script>
</body> </html>
