ฉันต้องการใช้ฟังก์ชั่นดังกล่าวเพราะมีคำมากเกินไปในตารางดังนั้นฉันจึงใช้วิธีการของข้อความที่ล้น แต่ฉันไม่เห็นเนื้อหาเฉพาะในตาราง ฉันต้องการตระหนักว่าเมื่อเมาส์ถูกขยับขึ้นเนื้อหาที่ซ่อนอยู่สามารถแสดงในบรรทัดนี้ได้ แน่นอนว่ามีปลั๊กอินมากมายในเว็บไซต์นี้ แต่ฉันไม่ได้ใช้ดังนั้นฉันจึงเขียนด้วยตัวเอง
ส่วน CSS
<style> #showbox {width: 150px; min-height: 50px; ตัวอักษร: 100 14px/1 "Microsoft Yahei"; ชายแดน: 1px Solid #3C8DBC; แสดง: ไม่มี; ตำแหน่ง: Absolute; Top: 0; ซ้าย: 0;ส่วน HTML
<table id = "example1" role = "grid"> <tow style = "พื้นหลังสี: #e4e9f0;"> <tr role = "แถว"> <th rowspan = "2" style = "text-allign: center; width: 6%;" colspan = "1"> <font style = "font-weight: bold;"> หมายเลขซีเรียล </font> </th> <th rowspan = "2" style = "text-allign: center; ความกว้าง: 10%;" colspan = "1"> <font style = "font-weight: bold;"> name </font> </th> <th rowspan = "2" style = "text-allign: หมวดหมู่ </font> </th> <th rowspan =" 2 "style = ความกว้าง: 8%; "colspan =" 1 "> <font style =" font-weight: bold; "> หน่วย </font> </th> <th rowspan =" 2 "style =" text-allign: center; ความกว้าง: 26%; "colspan =" 1 "> <font style =" font-weight: bold; "> ข้อกำหนดความสำเร็จ </font> </th> <th colspan =" 2 "style =" text-allign: center; "rowspan =" 1 "> <font style =" font-weight: bold; "> ความคืบหน้า </font> </th> </tr> <tr role =" row "> <th style =" text-allign: 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> <td> d> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> als คือ </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> </td>
ส่วน JS
$ (function () {function showbox (obj, box) {var timer = null; $ (obj) .on ("mouseover", ฟังก์ชั่น (e) {cleartimeout (ตัวจับเวลา); var clientx = e.clientx; var clienty = e.clienty; var txt = $ (นี้) clienty); $ (กล่อง) .css ("ซ้าย", clientx) .css ("top", clienty); ถ้า (txt == "") {$ (กล่อง) .hide ();} else {$ (กล่อง). show (); $ (กล่อง) .html (txt);}} 1000);}); $ (obj) .on ("mouseout", function () {cleartimeout (ตัวจับเวลา); $ (กล่อง) .hide ();});} showbox ("#ตัวอย่าง 1> tbody td", "#showbox");});ในที่สุดก็มีส่วนประกอบใน bootstrap ที่สามารถแสดงเนื้อหา แต่มันแสดงชื่อ มันจะไม่เปลี่ยนแปลงในตอนแรก หลังจากมีคนตื่นขึ้นมาคุณสามารถกำหนดชื่อเรื่องโดยตรงซึ่งเป็นเพียงการกำหนดชื่อให้กับข้อความในตาราง
ข้างต้นเป็นเนื้อหาเต็มรูปแบบของกริดนี้ตามรหัส JS ที่ตัวแก้ไขแนะนำให้คุณรู้จักเมื่อตารางเมาส์วางตัวอยู่ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!