Table highlighting and tooltip in HTML

In a table that needs to display a lot of data, to view a row of data more efficiently, you often need to highlight this row when moving the cursor to a row. There are many ways to achieve this effect. Here is a method:

Function setTableHover (t ){
$ (T + "tbody tr ")
. Mouseover (function () {$ (this). addClass ("hover ");})
. Mouseout (function () {$ (this). removeClass ("hover ");})
}
When you move the cursor over a row, add a highlighted css class to the row. When you move the cursor away, remove the class. It can be set for a specific table:

<Table id = "test">
</Table>
<Script>
SetTableHover ('# test ')
</Script>
You can even set all the tables on a page as highlighted:

<Script>
SetTableHover ('table ')
</Script>
In css, you need to write the hover:

. Hover {
Background: # e9cffa;
}
In addition to highlighting a row, you may need to bring up a tooltip when you move the cursor to a cell. The tooltip can be a pop-up window, that is, a div element.

<Tr>
<Td class = "tip">
Hello
<Div class = 'popup' style = 'display: none; '> this is the tip </div>
</Td>
</Tr>
To achieve this effect, you can modify the mouse event response that contains the tip class:

$ (Function (){
$ ('. Tip'). hover (
Function (){
Show_popupex ($ (this). find ("div"), $ (this ));
},
Function (){
$ (This). find ("div"). hide ();
}
);
});