Based on JS Code, when you hover the mouse over the table to display all the content of this grid, js hover

Based on JS Code, when you hover the mouse over the table to display all the content of this grid, js hover

To implement this function, you can use the text overflow method to handle a large number of words in a table. However, you cannot see the specific content in the table. This line of hidden content can be displayed when you move the cursor up. Of course there are many plug-ins on the Internet, but I did not use them. I wrote one myself.

Css Section

<Style> # showbox {width: 150px; min-height: 50px; font: 100 14px/1 ""; border: 1px solid # 3c8dbc; display: none; position: absolute; top: 0; left: 0; background-color: # fff; padding: 5px;} </style>

Html section

<Table id = "example1" role = "grid"> <thead style = "background-color: # E4E9F0; "> <tr role =" row "> <th rowspan =" 2 "style =" text-align: center; width: 6%; "class =" sorting_disabled "colspan =" 1 "> <font style =" font-weight: bold; "> NO. </font> </th> <th rowspan =" 2 "style =" text-align: center; width: 10%; "class =" sorting_disabled "colspan =" 1 "> <font style =" font-weight: bold; "> name </font> </th> <th rowspan =" 2 "style =" text-align: center; width: 10%; "class =" sorting_disabled "colspan =" 1 "> <font style =" font-weight: bold; "> Category </font> </th> <th rowspan =" 2 "style =" text-align: center; width: 8%; "class =" sorting_disabled "colspan =" 1 "> <font style =" font-weight: bold; "> Unit </font> </th> <th rowspan =" 2 "style =" text-align: center; width: 26%; "class =" sorting_disabled "colspan =" 1 "> <font style =" font-weight: bold; "> results requirements </font> </th> <th colspan =" 2 "style =" text-align: center; "rowspan =" 1 "> <font style =" font-weight: bold; "> progress </font> </th> </tr> <tr role =" row "> <th style =" text-align: center, width: 30%; "class =" sorting_disabled "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> Latest Progress </font> </th> <th style =" text-align: center; width: 10%; "class =" sorting_disabled "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> Update time </font> </th> </tr> </thead> <tbody> <tr role =" row "> <td> 1 </td> <td> arailei </td> <td> </tr> <tr role = "row"> <td> 2 </td> <td> Ala Lei </ td> <td> alilei </td> </tr> <tr role = "row" class = "odd"> <td> 3 </td> <td> arailei, </td> <td> Ala Lei </td> </tr> </tbody> </table> <div id = "showbox"> </div>

Js Section

$(function() {function showBox(obj,box){var timer = null;$(obj).on("mouseover", function (e) {clearTimeout(timer);var clientX = e.clientX;var clientY = e.clientY;var txt = $(this).text();timer = setTimeout(function () {console.log(clientX, clientY);$(box).css("left", clientX).css("top", clientY);if (txt == "") {$(box).hide();} else {$(box).show();$(box).html(txt);}}, 1000);});$(obj).on("mouseout",function(){clearTimeout(timer);$(box).hide();});}showBox("#example1 > tbody td","#showbox");});

Finally, a component in bootstrap can display the content, but only the title is displayed. It will not be used at the beginning. After waking up, you can assign a value to the title directly, it is good to assign the title value to the text in the table.

The above is a small series of JS Code-based implementation. When you hover the mouse over the table to display all the content of this grid, I hope to help you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!