JSコードに基づいて、マウスホバーテーブルにこのボックスのすべての内容を表示するように実装されています。

テーブルには単語が多すぎるため、このような関数を実装したいので、あふれるテキストの方法を使用しますが、テーブルに特定のコンテンツが表示されません。マウスが移動すると、この行に隠されたコンテンツを表示できることを認識したいと思います。もちろん、このウェブサイトには多くのプラグインがありますが、私はそれを使用しなかったので、私は自分で書いた。

CSSパーツ

<style> #showbox {width：150px; min-height：50px; font：100 14px/1 "microsoft yahei"; border：1px solid＃3c8dbc; display：none; position：aspolute; top：0; left：0; background-color：#fff; padding

HTMLパーツ

<table id = "example1" role = "grid"> <tow style = "background-color：＃e4e9f0;"> <tr role = "row"> <th rowspan = "2" style = "text-align：center; width：6％;" colspan = "1"> <font style = "font-weight：bold;">シリアル番号</font> </th rowspan = "2" style = "text-align：center; width：10％;" colspan = "1"> <font style = "font-weight：bold;"> name </font> </th rowspan = "2" style = "text-align：category </font> </th> <th rowspan =" 2 "style =" text-align：center;幅：8％; "colspan =" 1 "> <font style =" font-weight：bold; "> unit </font> </th rowspan =" 2 "style =" text-align：center;幅：26％; "colspan =" 1 "> <font style =" font-weight：bold; ">達成要件</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 =" tex-align：center;幅：30％; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight：bold; ">最新の進行</font> </th> </th> </tr> </tman> <tbody> <tr role = "row"> <td> 1 </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </ td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <t d> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> al </td> <td> alare </td> <td> </tr> <tr> <td> <td> </td> <tr> <tr> <td> </td> <tr> <tr> <tr> </td> <tr> <tr役割= "row"> <td> 3 </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> </td> </tr> </tbody>

JSパート

$（function（）{function showbox（obj、box）{var timer = null; $（obj）。 clienty）; $（box）.css（ "left"、clientx）.css（ "top"、clienty）; if（txt == ""）{$（box）.hide（）;} els {$（box）.show（）; $（box）.html（txt）;}}、 1000）;}）; $（obj）.on（ "mouseout"、function（）{cleartimeout（timer）; $（box）.hide（）;}）;} showbox（ "＃example1> tbody td"、 "＃showbox"）;}）;

最後に、Bootstrapにコンテンツを表示できるコンポーネントがありますが、タイトルが表示されます。最初は変わりません。誰かが目覚めた後、タイトルを直接割り当てることができます。これは、テーブル内のテキストにタイトルを割り当てるだけです。

上記は、マウスのホバリングテーブルが表示されたときにエディターが紹介したJSコードに基づいたこのグリッドの完全なコンテンツです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！