javascript修改表格背景顏色實例程式碼分享

作者：Eve Cole 更新時間：2025-01-18 15:00:03

複製代碼代碼如下:

<html>

//點選目前選取行的時候設定目前行的顏色，同時恢復除目前行外的行的顏色及滑鼠事件

function selectRow(target)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //遍歷除第一行以外的所有行

{

if (sTable.rows[i] != target) //判斷是否目前選定行

{

sTable.rows[i].bgColor = "#ffffff"; //設定背景色

sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件

sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件

}

else

{

sTable.rows[i].bgColor = "#d3d3d3";

sTable.rows[i].onmouseover = ""; //移除滑鼠事件

sTable.rows[i].onmouseout = ""; //移除滑鼠事件

}

//移過時tr的背景色

function rowOver(target)

{

target.bgColor='#e4e4e4';

}

//移出時tr的背景色

function rowOut(target)

{

target.bgColor='#ffffff';

}

//恢復tr的的onmouseover事件配套呼叫函數

function resumeRowOver()

{

rowOver(this);

}

//恢復tr的的onmouseout事件配套呼叫函數

function resumeRowOut()

{

rowOut(this);

}

</script>

<body>

<div onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">關於最後兩個函數resumeRowOver和resumeRowOut為什麼這樣寫參考我之前寫的透過js為頁面元素新增事件對應的表格HTMLview plaincopy to clipboardprint?

</div>

<tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>