테이블에 너무 많은 단어가 있기 때문에 그러한 함수를 구현하고 싶습니다. 따라서 텍스트가 넘치는 방법을 사용하지만 테이블에서 특정 내용을 볼 수 없습니다. 마우스가 올라 가면이 줄에 숨겨진 내용을 표시 할 수 있다는 것을 알고 싶습니다. 물론이 웹 사이트에는 많은 플러그인이 있지만 사용하지 않았으므로 직접 썼습니다.
CSS 부분
<Style> #showbox {width : 150px; min-height : 50px; font : 100 14px/1 "Microsoft Yahei"; 테두리 : 1px solid #3c8dbc; 디스플레이 : 없음; 위치; 상단 : 0; 왼쪽 : 0; 배경색 : #fff; 패딩 : 5px;} </style>HTML 부분
<table id = "example1"role = "grid"> <tow style = "back colspan = "1"> <font style = "font-weight : bold;"> 일련 번호 </font> </th> <th rowspan = "2"style = "text-align : center; 너비 : 10%;" colspan = "1"> <font style = "font-weight : bold;"> name </font> </th> <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> <th rowspan ="2 "style ="text-align : center; 폭 "rowspan ="1 "> <font style ="font-weight : bold; "> progress </font> </th> </tr> <tr 역할 ="row "> <th style ="text-align : center; 폭 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> 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 are </td> <td> alare </td> <td> </td> <tr> <td> <td> </td> <tr> <tr> <td> </td> <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> </tbody> </tables> <div id = "showbox">
JS 부분
$ (function () {function showbox (obj, box) {var timer = null; $ (obj) .on ( "마우스 오버", function (e) {cleartimeout (timer); var clientx = e.clientx; var clienty = e.clienty; var txt = $ (this) .text = settimeout (function () client.log (clientod.log). client); $ (box) .css ( "왼쪽", clientx) .css ( "top", clienty); if (txt == "") {$ (box) .hide ();} else {$ (box) .show (); $ (box) .html (txt);}, 1000);}); $ (obj) .on ( "마우스 아웃", function () {cleartimeout (timer); $ (box) .hide ();});} showbox ( "#example1> tbody td", "#showbox";});마지막으로 부트 스트랩에는 내용을 표시 할 수있는 구성 요소가 있지만 제목을 표시합니다. 처음에는 변하지 않습니다. 누군가가 깨어 난 후에는 제목을 직접 할당 할 수 있습니다. 제목은 테이블의 텍스트에 제목을 할당하는 것입니다.
위는 마우스 호버링 테이블이 표시 될 때 편집기가 소개 한 JS 코드를 기반 으로이 그리드의 전체 내용입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!