Saya ingin menerapkan fungsi seperti itu, karena ada terlalu banyak kata dalam sebuah tabel, jadi saya menggunakan metode teks yang meluap, tetapi saya tidak dapat melihat konten spesifik dalam tabel. Saya ingin menyadari bahwa ketika mouse dipindahkan, konten tersembunyi dapat ditampilkan di baris ini. Tentu saja ada banyak plug-in di situs web ini, tetapi saya tidak menggunakannya, jadi saya menulisnya sendiri.
Bagian CSS
<tyle> #showbox {width: 150px; min-height: 50px; font: 100 14px/1 "microsoft yahei"; Border: 1px solid #3c8dbc; tampilan: tidak ada; posisi: absolute; atas: 0; kiri: 0; latar belakang-warna: #fff; padding: 5px;} </style;bagian html
<tabel id = "example1" role = "grid"> <tow style = "latar belakang-color: #e4e9f0;"> <tr role = "row"> <tH rowspan = "2" style = "text-align: center; width: 6%;" colspan = "1"> <font style = "font-weight: bold;"> nomor seri </font> </th> <rowspan = "2" style = "Text-Align: Center; Width: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <thowspan = "2" style = "text-align: kategori </font> </t> <thowspan =" 2 "style =" text-align: center; Lebar: 8%; "colspan =" 1 "> <font style =" font-weight: bold; "> unit </font> </th> <rowspan =" 2 "style =" text-align: center; Lebar: 26%; "colspan =" 1 "> <font style =" font-weight: bold; "> Persyaratan pencapaian </font> </t> <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; Lebar: 30%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: bold; "> kemajuan terbaru </font> </t> </t th> </tr> </tman> <tbody> Role = "Row"> <td> 1 </td> <td> Alare </td> <td> Alare </td> <td> Alare </td> <td> Alare </td> <td> Alare </td> 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 adalah </td> <td> alare </td> <td> </tr> <tr> <tr> <td> </td> <tr> <tr> <td> </td> <tr> <tr> <tr> </td> <tr> <tr Role = "Row"> <td> 3 </td> <td> Alare </td> <td> Alare </td> <td> Alare </td> <td> Alare </td> <td> Alare </td> <td> </tden </tr> </tdbox> </todbox> </tdbox> </tr> </t/todbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox> </tdbox>
Bagian 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 (); timer = setTimeout (function () {this) .text (); timer = setTimeout (function () {this) .text (); timer = function (function = function () {this) .text (); timer = function (function = function () {this) .text (); timer = setTimeout (function () {this) .text (); timer = function (function = function. clienty); $ (box) .css ("kiri", clientx) .css ("top", clienty); if (txt == "") {$ (box) .hide ();} else {$ (box) .show (); $ (box) .html (txt); {$ (box) .show (); $ (box) .html (txt);}}, 1000);}); $ (obj) .on ("mouseout", function () {clearTimeout (timer); $ (box) .hide ();});} showbox ("#contoh1> tbody td", "#showbox");});Akhirnya, ada komponen di bootstrap yang dapat menampilkan konten, tetapi menunjukkan judulnya. Itu tidak akan berubah di awal. Setelah seseorang bangun, Anda dapat langsung menetapkan judul, yang hanya menetapkan judul ke teks di tabel.
Di atas adalah konten lengkap dari kisi -kisi ini berdasarkan kode JS yang diperkenalkan editor kepada Anda ketika mouse melayang -layang ditampilkan. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!