關(guān)于Javascript的中表格的刪除添加并添加樣式
標(biāo)簽：
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>
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦