在表格中实现删除、添加和确定功能。在javascript中找准节点是很重要的一个环节，浏览器的不同代表的节点就不同了，比如火狐和谷歌浏览器换行也是一个节点，在IE浏览器中换行不算是一个节点，这个要理解清楚：对我我这个做的还部完美，还需要改进：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
width: 900px;
height: 400px;
margin:0px auto;
}
table td{
width: 150px;
height: 100px;
}
input{
border: none;
}
</style>
<script type="text/javascript">
function fun1(){
var tr=document.getElementsByTagName("tr");
var i=0;
for(i=0;i<3;i++){
tr[0].cells[i].innerHTML="";
}
}
function fun2(){
var tr=document.getElementsByTagName("tr");
var i=0;
for(i=0;i<3;i++){
tr[1].cells[i].innerHTML="";
}
}
function fun3(){
var tr=document.getElementsByTagName("tr");
var i=0;
for(i=0;i<3;i++){
tr[2].cells[i].innerHTML="";
}
}
function fun4(){
var tr=document.getElementsByTagName("tr");
var i=0;
for(i=0;i<3;i++){
tr[3].cells[i].innerHTML="";
}
}
var ip=document.getElementsByTagName("input");
function fun5(){
for(var i=0;i<3;i++){
ip[i].removeAttribute("readonly");
}
}
function fun6(){
for(var i=5;i<8;i++){
ip[i].removeAttribute("readonly");
}
}
function fun7(){
for(var i=10;i<13;i++){
ip[i].removeAttribute("readonly");
}
}
function fun8(){
for(var i=15;i<18;i++){
ip[i].removeAttribute("readonly");
}
}
function fun9(){
var body =document.getElementsByTagName("tbody")[0];
var tr =document.getElementsByTagName("tr");
var tr1=document.createElement("tr");
tr1.innerHTML="<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>" +
"<td></td>"
body.appendChild(tr1);
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><input value="1111111111111" readonly="readonly"/></td>
<td><input value="222222222222" readonly="readonly"/></td>
<td><input value="333333333333" readonly="readonly"/></td>
<td><input type="button" value="删除" onclick="fun1()"/></td>
<td><input type="button" value="修改" onclick="fun5()"/></td>
<td><a href="">确定</a></td>
</tr>
<tr>
<td><input value="44444444" readonly="readonly"/></td>
<td><input value="5555555555" readonly="readonly"/></td>
<td><input value="666666666" readonly="readonly"/></td>
<td><input type="button" value="删除" onclick="fun2()"/></td>
<td><input type="button" value="修改" onclick="fun6()"/></td>
<td><a href="">确定</a></td>
</tr>
<tr>
<td><input value="7777777777" readonly="readonly"/></td>
<td><input value="88888888888" readonly="readonly"/></td>
<td><input value="99999999999" readonly="readonly"/></td>
<td><input type="button" value="删除" onclick="fun3()"/></td>
<td><input type="button" value="修改" onclick="fun7()"/></td>
<td><a href="">确定</a></td>
</tr>
<tr>
<td><input value="aaaaaaaaa" readonly="readonly"/></td>
<td><input value="bbbbbbbb" readonly="readonly"/></td>
<td><input value="ccccccc" readonly="readonly"/></td>
<td><input type="button" value="删除" onclick="fun4()"/></td>
<td><input type="button" value="修改" onclick="fun8()"/></td>
<td><a href="">确定</a></td>
</tr>
</tbody>
<tr>
<td colspan="6"><input type="button" value="添加" onclick="fun9()"/></td>
</tr>
</table>
</body>
</html>
在这当中也是需要注意的地方就是就是对单词的把控，，对于我来说单词是最重要的环节，对于这个单词的部熟悉就会连错都找不到，很痛苦的回忆。。
原文：http://www.cnblogs.com/wangjunjunjiayuan/p/4510677.html