<style>
td,th{
width:150px;
text-align:center;
}
</style>
<script>
function add(obj){
//obj.cells(0).innerHTML=obj.getElementsByTagName("input")[0].value;
obj.cells(0).innerHTML=obj.cells(0).getElementsByTagName("input")[0].value;
obj.cells(1).innerHTML=obj.cells(1).getElementsByTagName("input")[0].value;
obj.cells(2).innerHTML="<input type='button' value='修改' onclick='toEdit(this.parentNode.parentNode);'><input type='button' value='删除' onclick='this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex);'>";
}
function toAdd(){
var count=document.getElementById("t1").rows.length;
var row=document.getElementById("t1").insertRow(count-1);
//var row=document.getElementById("t1").insertRow(-1);
row.insertCell(0).innerHTML="<input type='text'>";
row.insertCell(1).innerHTML="<input type='text'>";
row.insertCell(2).innerHTML="<input type='button' value='添加' onclick='add(this.parentNode.parentNode);'><input type='button' value='取消' onclick='this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex);'>";
}
function edit(obj){
obj.cells(0).innerHTML=obj.cells(0).getElementsByTagName("input")[0].value;
obj.cells(1).innerHTML=obj.cells(1).getElementsByTagName("input")[0].value;
obj.cells(2).innerHTML="<input type='button' value='修改' onclick='toEdit(this.parentNode.parentNode);'><input type='button' value='删除' onclick='this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex);'>";
}
function toEdit(obj){
var value_1=obj.cells(0).innerHTML;
var value_2=obj.cells(1).innerHTML;
obj.cells(0).innerHTML="<input type='text' value="+obj.cells(0).innerHTML+">";
obj.cells(1).innerHTML="<input type='text' value="+obj.cells(1).innerHTML+">";
obj.cells(2).innerHTML="<input type='button' value='修改' onclick='edit(this.parentNode.parentNode);'><input type='button' value='取消' onclick=cancelEdit(this.parentNode.parentNode,'"+value_1+"','"+value_2+"');>";
}
function cancelEdit(obj,value1,value2){
obj.cells(0).innerHTML=value1;
obj.cells(1).innerHTML=value2;
obj.cells(2).innerHTML="<input type='button' value='修改' onclick='toEdit(this.parentNode.parentNode);'><input type='button' value='删除' onclick='this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex);'>";
}
</script>
<body>
<table id="t1" border="1">
<tr><th>编号</th><th>姓名</th><th>操作</th></tr>
<tr><td>01</td><td>葫芦丝</td><td><input type="button" value="修改" onclick="toEdit(this.parentNode.parentNode);">
<input type='button' value='删除' onclick='this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex);'></td></tr>
<tr><td>02</td><td>陶埙</td><td><input type="button" value="修改" onclick="toEdit(this.parentNode.parentNode);">
<input type='button' value='删除' onclick='this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex);'></td></tr>
<tr><td>03</td><td>钢琴</td><td><input type="button" value="修改" onclick="toEdit(this.parentNode.parentNode);">
<input type='button' value='删除' onclick='this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex);'></td></tr>
<tr><td colspan="3"><input type="button" value="添加新的一行" onclick="toAdd();"></td></tr>
</table>
<br>
</body>
-----------------------------------------------------------------------------------------------------------------------
其它总结：
1. td.parentNode就是所在tr，tr.parentNode就是所在table，parentNode也可写作parentElement
2. 如果只是获取非组件中的文本，innerHTML也可写作innerText