夜阑卧听风吹雨y
2018-06-19 22:49
</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>
代码没有太大问题,都是些细节问题,不难找出错误。错误一: 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>
js代码贴一下
JavaScript进阶篇
468195 学习 · 21891 问题
相似问题