</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="#" onclick = "deleteItem(this);return false;" >删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javasript:;" onclick = "deleteItem(this);" >删除</a></td>
</tr>
</table>
<input type="button" value="添加一行" onclick = "addTo();"/>
</body>
</html>
2018-06-19
代码没有太大问题，都是些细节问题，不难找出错误。错误一： td.innerHTML='<a href="#" onclick = "deleteItem(this);return false;">删除</a>;这行代码改为：td.innerHTML="<a href='#' onclick='deleteItem(this);return false;'>删除</a>";。这里面的错误就是双引号和单引号的用法，我就不多做介绍了。错误二：table.removeChild(tr)；改成：table.removeChild(tr);这里面的错误就是中文分号和英文分号的问题，打字后记得切换为英文输入法，这是一个程序员的基本素质，不然出现小的细节错误很难发现。
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
var trs = document.getElementsByTagName('tr');
for(var i = 1; i < trs.length; i++)
{
trs[i].onmouseover = function()//触发trs【i】的鼠标移到上面事件
{
this.style.backgroundColor = "#f2f2f2";//鼠标移到上面触发背景色改变
}
trs[i].onmouseout = function()
{
this.style.backgroundColor = "#fff";
}
}
}
function addTo(){
var table = document.getElementById('table').lastChild;//访问table节点下的最后一个子节点
var tr = document.createElement('tr');//创建元素节点
var td = document.createElement('td');//创建元素节点
td.innerHTML="<input type = 'text' />";
tr.appendChild(td);
td = document.createElement('td');
td.innerHTML="<input type = 'text' />";
tr.appendChild(td);//在指定节点的最后一个子节点后添加一个子节点
td = document.createElement('td');
td.innerHTML='<a href="#" onclick = "deleteItem(this);return false;">删除</a>;
tr.appendChild(td);
table.appendChild(tr);
}
function deleteItem(obj){
var table = document.getElementById('table').lastChild;
var tr = obj.parentNode.parentNode;
table.removeChild(tr)；
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="#" onclick = "deleteItem(this);return false;">删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td >
<a href="javascript:;" onclick="deleteItem(this);" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="addTo();" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
举报
