為什么新加的表格和復(fù)制的表格，鼠標(biāo)移動(dòng)上面時(shí)背景色不變化呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
?<html xmlns="http://www.w3.org/1999/xhtml">
?<head>
?<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
?<title>Js操作表格-對(duì)表格TR的添加/刪除/拷貝</title>
?<style>
?body { margin:0; padding:0; font-size:12px;}
?table, td{ border-collapse:collapse; border:1px solid #ccc;}
?td{ padding:10px;}
?</style>
?</head>
?
?<body>
?<input type="button" id="Refresh" value="刷新頁面" />
?<input type="button" id="Insert_row" value="添加TR" />
?<input type="button" id="delRow" value="刪除選擇" />
?<input type="button" id="copyRow" value="拷貝選擇" />
?
?<table id="myTable">
? ? ?<tr>
? ? ? ? ?<td><input type="checkbox" name="checkbox" /></td>
? ? ? ? ?<td>11</td>
? ? ? ? ?<td>11</td>
? ? ?</tr>
? ? ?<tr>
? ? ? ? ?<td><input type="checkbox" name="checkbox" /></td>
? ? ? ? ?<td>22</td>
? ? ? ? ?<td>22</td>
? ? ?</tr>
? ? ?<tr>
? ? ? ? ?<td><input type="checkbox" name="checkbox" /></td>
? ? ? ? ?<td>33</td>
? ? ? ? ?<td>33</td>
? ? ?</tr>
? ? ?<tr>
? ? ? ? ?<td><input type="checkbox" name="checkbox" /></td>
? ? ? ? ?<td>44</td>
? ? ? ? ?<td>44</td>
? ? ?</tr>
? ? ?<tr>
? ? ? ? ?<td><input type="checkbox" name="checkbox" /></td>
? ? ? ? ?<td>55</td>
? ? ? ? ?<td>55</td>
? ? ?</tr>
?</table>
?
?<script>
? ? ? ? // 鼠標(biāo)移動(dòng)改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
? ? ? ? window.onload = function(){
? ? ? ? bgColor();
? ? }
function bgColor(){ var tbody = document.getElementById('myTable').lastChild;
trs = tbody.getElementsByTagName('tr'); ??
for(var i =0;i<trs.length;i++){
trs[i].onmouseover = function(){
this.style.backgroundColor ="#f2de76";
}?
trs[i].onmouseout = function(){
this.style.backgroundColor ="#fff";
}?
}?
}
?var doc = document,
? ? ?myTable = doc.getElementById("myTable"),
? ? ?selectBox = myTable.getElementsByTagName("input");
? ? ?
?//復(fù)制tr
?doc.getElementById("copyRow").onclick = function(){
? ? ?for(var i=0; i<selectBox.length; i++){
? ? ? ? ?if(selectBox[i].checked){
? ? ? ? ? ? ?var newTr = myTable.rows[i].cloneNode(true);
? ? ? ? ? ? ?newTr.getElementsByTagName("input")[0].checked = false;
? ? ? ? ? ? ?myTable.appendChild(newTr);
? ? ? ? ?}
? ? ?}
?}
?
?//刪除tr ? ?
?doc.getElementById("delRow").onclick = function(){
? ? ?for(var i=selectBox.length-1; i>=0; i--){
? ? ? ? ?if(selectBox[i].checked){
? ? ? ? ? ? ?myTable.deleteRow(i);
? ? ? ? ?}
? ? ?}
?}
?
?//添加tr
?doc.getElementById("Insert_row").onclick = function(){
? ? ?var tr = doc.createElement("tr");
? ? ?for(var i=0; i<3; i++){
? ? ? ? ?var td = doc.createElement("td");
? ? ? ? ? ? ?txt = doc.createTextNode("新增");
? ? ? ? ?td.appendChild(txt);
? ? ? ? ?tr.appendChild(td);
? ? ? ? ?if(i==0){
? ? ? ? ? ? ?td.innerHTML = "<input type='checkbox' name='checkbox' />"?
? ? ? ? ?}
? ? ?}
? ? ?myTable.appendChild(tr);
?}
?
?//刷新頁面
?doc.getElementById("Refresh").onclick = function(){
? ? ?location.reload();
?}
?</script>
?</body>
?</html>
2016-08-02
myTable = doc.getElementById("myTable"),改為
?myTable = doc.getElementById("myTable").lastChild,
table和tr之間還有一層tbody
其次在復(fù)制和添加函數(shù)最后調(diào)用?bgColor()，來為新增的節(jié)點(diǎn)添加事件