javascript

Javascript changes table background color instance code sharing

<html>
<script>
//When clicking the currently selected row, set the color of the current row, and restore the color of the row other than the current row and mouse events
function selectRow(target)
{
     var sTable = document.getElementById("ServiceListTable")
     for(var i=1;i<sTable.rows.length;i++) //Traverses all rows except the first
     {
         if (sTable.rows[i] != target) //Determines whether the row is currently selected
         {
             sTable.rows[i].bgColor = "#ffffff"; //Set the background color
             sTable.rows[i].onmouseover = resumeRowOver; //Adds the onmouseover event
             sTable.rows[i].onmouseout = resumeRowOut;//Adds the onmouseout event
         }
         else
         {
             sTable.rows[i].bgColor = "#d3d3d3";
             sTable.rows[i].onmouseover = ""; //Remove mouse events
             sTable.rows[i].onmouseout = ""; //Remove mouse events
         }
     }
}
//Remove the tr background color
function rowOver(target)
{
    target.bgColor='#e4e4e4';
}
//Tr background color when removed
function rowOut(target)
{
    target.bgColor='#ffffff';
}
//The onmouseover event that restores tr matches the call function
function resumeRowOver()
{
    rowOver(this);
}
//The onmouseout event that restores tr matches the call function
function resumeRowOut()
{
    rowOut(this);
}　　
</script>
<body>
<div style="width:50px;height:50px;background-color:Blue" onmouseover="javascript:this.style.backgroundColor='red';" onmouseout="javascript:this.style.backgroundColor='blue'"> About the last two functions resumeRowOver and resumeRowOut Why do I write this as a reference to what I wrote before js Add a table of events to the page element HTMLview plaincopy to clipboardprint?
</div>
<table width="100%" border="1" cellspacing="1" cellpadding="0" id="ServiceListTable"> 
<tr> 
<th> The service items </th> 
<th>N</th> 
<th> state </th> 
<th> Transferred to </th> 
<th> data </th> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td> The related content </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td> The related content </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td> The related content </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)"> 
<td> The related content </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
</table> 
</body>
</html>