Web Front-end
JS Tutorial
Efficient table row background color change and selected highlighted JS code_javascript skills
Efficient table row background color change and selected highlighted JS code_javascript skills
Place this JS in the head
//Click on the current selection Set the color of the current row when rowing, and restore the color and mouse events of rows other than the current row at the same time
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i
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; //Increase 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
}
}
}
//The background color of tr when moved out
function rowOver(target)
{
target.bgColor='#e4e4e4';
}
//The background of tr when moved out Color
function rowOut(target)
{
target.bgColor='#ffffff';
}
//Restore tr’s onmouseover event supporting call function
function resumeRowOver()
{
rowOver(this);
}
//Restore tr’s onmouseout event supporting call function
function resumeRowOut()
{
rowOut(this);
}
Regarding why the last two functions resumeRowOver and resumeRowOut are written like this, refer to what I wrote before about adding events to page elements through js
The corresponding table HTML
| Service matters | N | Complete | Information | |
|---|---|---|---|---|
| Related content | | |||
| Related content | ||||
| Related content | ||||
| Related content | |
