テーブルには単語が多すぎるため、このような関数を実装したいので、あふれるテキストの方法を使用しますが、テーブルに特定のコンテンツが表示されません。マウスが移動すると、この行に隠されたコンテンツを表示できることを認識したいと思います。もちろん、このウェブサイトには多くのプラグインがありますが、私はそれを使用しなかったので、私は自分で書いた。
CSSパーツ
<style> #showbox {width：150px; Min-Height：50px;フォント：100 14px/1 "Microsoft yahei";境界線：1pxソリッド＃3c8dbc;表示：なし;位置：絶対;上：0;左：0;バックグラウンドカラー：#fff;パディング：5px; } </style>HTMLパーツ
<table id = "example1" role = "grid"> <tear 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：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 style =" text-align：center; 10％; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight：bold; ">更新時間</font> </th> </tr> </tour> <tbody> <tr row =" row "> <td> 1 </td> <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> <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> <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> <td> alare </td> <td> alare </tbody> </table> <div id = "showbox"> </div>
JSパート
$（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（）; setime（）{console（）; console（）; $（左 "、client"、clienty）; cleartimeout（box）.hide（）}};最後に、Bootstrapにコンテンツを表示できるコンポーネントがありますが、タイトルが表示されます。最初は変わりません。誰かが目覚めた後、タイトルを直接割り当てることができます。これは、テーブル内のテキストにタイトルを割り当てるだけです。
マウスがテーブルに移動されたときにこのボックスのコンテンツ全体を表示するコードは、エディターが共有するコンテンツ全体です。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。