<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
tr{
height: 60px;
}
td ,th{
width: 150px;
text-align: center;
}
</style>
<script>
function addNode(){
var tab = document.getElementById ("tab");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerHTML = "<input type='Text'/ size="10px" οnblur='saveVal(this)' />";
var td2 = document.createElement("td");
td2.innerHTML = "<input type='Text' size="10px" οnblur='saveVal(this)' />";
var td3 = document.createElement("td");
td3.innerHTML = "<input type='button' value='添加'/>"+
"<Input type='button' Value="删除"/>";
tab.appendChild(tr);
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
}
function saveVal(thi){
var td =thi.parentNode;
td.innerText = thi.value;
}
function removeNode(){
var tr =thi.parentNode.parenNode;
tr.remove();
}
</script>
</head>
<body>
<table border="1px" align="center">
<tr>
<th>图书名称</th>
<th>图书价格</th>
<th>操作</th>
</tr>
<tr>
<td>javaSE</td>
<td>19</td>
<td>
<input type="button" name="" id="" value="添加" οnclick="addNode()"/>
<input type="button" name="" id="" value="删除" οnclick="removeNode(this)"/>
</td>
</tr>
<tr>
<td>javaSE</td>
<td>19</td>
<td>
<input type="button" name="" id="" value="添加" />
<input type="button" name="" id="" value="删除" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
错误分析如下：
引号使用错误：在JavaScript代码中，字符串内使用双引号会导致语法错误，应该使用单引号或转义双引号。
变量名拼写错误：在removeNode函数中，thi变量未定义，应该接收传入的参数。
parenNode拼写错误：应该是parentNode。
addNode函数逻辑错误：tr元素应该先添加td元素，再将tr添加到tab中。
修改后的代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>tr{height: 60px;}td ,th{width: 150px;text-align: center;}</style><script>function addNode(){var tab = document.getElementById ("tab");var tr = document.createElement("tr");var td = document.createElement("td");// 修改引号使用td.innerHTML = '<input type="text" size="10px" onblur="saveVal(this)" />';var td2 = document.createElement("td");// 修改引号使用td2.innerHTML = '<input type="text" size="10px" onblur="saveVal(this)" />';var td3 = document.createElement("td");// 修改引号使用td3.innerHTML = '<input type="button" value="添加" onclick="addNode()"/>'+'<input type="button" value="删除" onclick="removeNode(this)"/>';// 先添加td到tr，再添加tr到tabtr.appendChild(td);tr.appendChild(td2);tr.appendChild(td3);tab.appendChild(tr);}function saveVal(thi){var td = thi.parentNode;td.innerText = thi.value;}function removeNode(elem){// 修改变量名和拼写错误var tr = elem.parentNode.parentNode;tr.remove();}</script></head><body><table id="tab" border="1px" align="center"><tr><th>图书名称</th><th>图书价格</th><th>操作</th></tr><tr><td>javaSE</td><td>19</td><td><input type="button" name="" id="" value="添加" onclick="addNode()"/><input type="button" name="" id="" value="删除" onclick="removeNode(this)"/></td></tr><tr><td>javaSE</td><td>19</td><td><input type="button" name="" id="" value="添加" onclick="addNode()"/><input type="button" name="" id="" value="删除" onclick="removeNode(this)"/></td></tr><tr><td></td><td></td><td></td></tr></table></body>
</html>修改说明
- 引号使用：将字符串内的双引号改为单引号，避免语法错误。
- 变量名和拼写错误：在
removeNode函数中，将thi改为elem，并修正parenNode为parentNode。 - 逻辑错误：调整
addNode函数中tr和td元素的添加顺序。
其实，经过上面修改的程序，依然存在错误，修改如下：可以实现增加和删除。但是，该程序还有bug，就是增加的行里面的内容只能输入一次，不能进行二次输入和修改。
还需要做修改完善。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
tr{
height: 60px;
}
td ,th{
width: 150px;
text-align: center;
}
</style>
<script>
function addNode(){
var tab = document.getElementById ("tab");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerHTML = '<input type="Text"/ size="10px" οnblur="saveVal(this)" />';
var td2 = document.createElement("td");
td2.innerHTML = '<input type="Text" size="10px" οnblur="saveVal(this)" />';
var td3 = document.createElement("td");
td3.innerHTML = '<input type="button" value="添加" οnclick="addNode()" />'+
'<Input type="button" Value="删除" οnclick="removeNode(this)" />';
tab.appendChild(tr);
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
}
function saveVal(thi){
var td =thi.parentNode;
td.innerText = thi.value;
}
function removeNode(elem){
var tr =elem.parentNode.parentNode;
tr.remove();
}
</script>
</head>
<body>
<table id="tab" border="1px" align="center">
<tr>
<th>图书名称</th>
<th>图书价格</th>
<th>操作</th>
</tr>
<tr>
<td>javaSE</td>
<td>19</td>
<td>
<input type="button" name="" id="" value="添加" οnclick="addNode()" />
<input type="button" name="" id="" value="删除" οnclick="removeNode(this)" />
</td>
</tr>
<tr>
<td>javaEE</td>
<td>29</td>
<td>
<input type="button" name="" id="" value="添加" οnclick="addNode()" />
<input type="button" name="" id="" value="删除" οnclick="removeNode(this)"/>
</td>
</tr>
<!-- <tr>
<td></td>
<td></td>
<td></td>
</tr> -->
</table>
</body>
</html>