Multiple solutions when you move the mouse over a cell (TR, TD) to change Background Color First:The TD cell is discolored and can be implemented only with simple JS Code. Simple code. Click it to run the code.
Second:The TR column is discolored. When you move the cursor over a table, the background color of the column in the table changes. It can be used in forum lists, News Publishing Systems, and the background. Provides two solutions.
Solution:
We know that you can only change the background color of a cell. To change the background color of a column, you must obtain the index value of the current cell in the row, traverse all rows in the table and change the background color of the corresponding cells in the row.
Procedure:Method 1: use the relevant set traversal settings of the table.
1. Insert the table Code <Table width = "200" Height = "30">
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
</Table> 2. Add a Javascript script that controls the background color. <SCRIPT>
Function cells_color (){
VaR ocolor, TD = event. srcelement
If (TD. tagname! = "TD ")
Return;
If (event. type = "Mouseover"
Ocolor = "# dedede"
Else ocolor = "# ffffff"
TB = TD. parentelement. parentelement
For (VAR I = 0; I <TB. Rows. length; I ++)
TB. Rows [I]. cells [TD. cellindex]. bgcolor = ocolor
}
</SCRIPT> 3. complete code after adding a mouse event to the table and triggering the corresponding function is as follows: <SCRIPT>
Function cells_color (){
VaR ocolor, TD = event. srcelement
If (TD. tagname! = "TD") // exit the function if the event does not occur in the cell.
Return
If (event. type = "Mouseover") // determine the event type and determine the color of the cell.
Ocolor = "# dedede"
Else ocolor = "# ffffff"
TB = TD. parentelement. parentelement // The last two objects in the cell are tables.
// Traverse all rows in the table and set the background color of the corresponding cell
For (VAR I = 0; I <TB. Rows. length; I ++)
TB. Rows [I]. cells [TD. cellindex]. bgcolor = ocolor
}
</SCRIPT>
<Table width = "200" Height = "30" border = "1" onmouseover = "cells_color ()" onmouseout = "cells_color ()">
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
</Table>
Tip: you can add a loop to change the background of all cells in the row where the mouse is located. The script is modified as follows: <SCRIPT>
Function cells_color (){
VaR ocolor, TD = event. srcelement
If (TD. tagname! = "TD ")
Return;
If (event. type = "Mouseover ")
Ocolor = "# dedede"
Else ocolor = "# ffffff"
Tr = TD. parentelement
TB = tr. parentelement
For (VAR I = 0; I <tr. cells. length; I ++)
Tr. cells [I]. bgcolor = ocolor
For (VAR I = 0; I <TB. Rows. length; I ++)
TB. Rows [I]. cells [TD. cellindex]. bgcolor = ocolor
}
</SCRIPT>Method 2: Use the col label of the table to group the table.
Complete code: <SCRIPT>
Function cells_color (){
VaR ocolor, TD = event. srcelement
If (TD. tagname! = "TD") // exit the function if the event does not occur in the cell.
Return
If (event. type = "Mouseover") // determine the event type and determine the color of the cell.
Ocolor = "# dedede"
Else ocolor = "# ffffff"
// The objects captured in sequence are the objects of the first two levels of the TD. Tr. tbody. Table. colgroup cells.
Cols = TD. parentelement. Children [0]
Cols. Children [TD. cellindex]. style. backgroundcolor = ocolor
}
</SCRIPT>
<Table width = "200" Height = "30" border = "1" onmouseover = "cells_color ()" onmouseout = "cells_color ()">
<Col>
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
<Tr>
<TD> demo </TD>
<TD> demo </TD>
<TD> demo </TD>
</Tr>
</Table> Note: Although tbody labels are not explicitly defined, tbody is automatically defined for all tables.
Note
Because method 2 has less traversal than method 1, the effect is higher. The effect of running the code is 1.2.37. Figure 1.2.37 move the mouse over a cell. The background color of the column where the cell is located changes.
In particular, this example involves many knowledge points, which are described as follows:
Col specifies the column-based table default attributes.
Colgroup specifies the default attribute of a column or a group of columns in a table.
Parentelement obtains the parent object in the object hierarchy.
Children obtains the set of DHTML objects that are directly descendant of objects.
Backgroundcolor sets or gets the background color of an object.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
