关于Javascript的中表格的删除添加并添加样式
标签：
JavaScript
<!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(){
Highlight();
}
function addOne(obj){
var tbody = document.getElementById('table').lastChild;
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='javascript:;' onclick='deleteRow(this)'>删除</a>";
tr.appendChild(td);
tbody.appendChild(tr);
Highlight();
}
function deleteRow(obj){
var tbody = document.getElementById('table').lastChild;
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}
function Highlight(){
var tbody=document.getElementById("table").lastChild;
//<table>标签下的子节点，遍历输出子节点的nodeName,nodeValue,nodeType。发现，<table>的子节点有两个，一个是“#text”，一个是“TBODY”。
“#text”的类型为3（文本节点）,值是空的，所以应该是<table>和<tbody>之间的空格或者换行部分。
"text"之后的节点就是<Tbody>，而<tr><td><th>这些都是在<tbody>里的，所以要删除表格中的某一行，就得先取得<tbody>节点，也就是<table>的lastChild这个节点了。
trs=tbody.getElementsByTagName("tr");
for(var i=1;i<trs.length;i++)
{
trs[i].onmouseover=function(){
this.style.backgroundColor="#f2f2f2";
//为什么是this而不是trs[i]，因为我们在做鼠标经过事件的时候，当鼠标移到一个对象上时就会触发该事件。this是指当前的，当鼠标移到当前对象时，它的样式就发生了改变。
}
trs[i].onmouseout=function(){
this.style.backgroundColor="#fff";
}
}
}
</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="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<input type="button" value="添加一行" onclick="addOne()" />
</body>
</html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦