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