Javascript modification table background color example code sharing

Author：Eve Cole Update Time：2025-01-18 15:00:03

Copy the code code as follows:

<html>

//Set the color of the current row when clicking on the currently selected row, and restore the colors and mouse events of rows other than the current row.

function selectRow(target)

{

var sTable = document.getElementById("ServiceListTable")

for(var i=1;i<sTable.rows.length;i++) //Traverse all rows except the first row

{

if (sTable.rows[i] != target) //Determine whether the row is currently selected

{

sTable.rows[i].bgColor = "#ffffff"; //Set the background color

sTable.rows[i].onmouseover = resumeRowOver; //Add onmouseover event

sTable.rows[i].onmouseout = resumeRowOut;//Add onmouseout event

}

else

{

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

sTable.rows[i].onmouseover = ""; //Remove mouse events

sTable.rows[i].onmouseout = ""; //Remove mouse events

}

//Background color of tr when moved

function rowOver(target)

{

target.bgColor='#e4e4e4';

}

//The background color of tr when moving out

function rowOut(target)

{

target.bgColor='#ffffff';

}

//Restore tr's onmouseover event supporting calling function

function resumeRowOver()

{

rowOver(this);

}

//Restore tr's onmouseout event supporting calling function

function resumeRowOut()

{

rowOut(this);

}

</script>

<body>

<div onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'">For the last two functions resumeRowOver and resumeRowOut, please refer to what I wrote before Add a table corresponding to the event to the page element through js HTMLview plaincopy to clipboardprint?

</div>

<tr>

<th>Service matters</th>

<th>Status</th>

<th>Closed</th>

<th>Information</th>

</tr>

<td>Related content</td>

</tr>

<td>Related content</td>

</tr>

<td>Related content</td>

</tr>

<td>Related content</td>

</tr>

</table>

</body>

</html>