테이블에 너무 많은 단어가 있기 때문에 그러한 함수를 구현하고 싶습니다. 따라서 텍스트가 넘치는 방법을 사용하지만 테이블에서 특정 내용을 볼 수 없습니다. 마우스가 올라 가면이 줄에 숨겨진 내용을 표시 할 수 있다는 것을 알고 싶습니다. 물론이 웹 사이트에는 많은 플러그인이 있지만 사용하지 않았으므로 직접 썼습니다.
CSS 부분
<Style> #showbox {너비 : 150px; Min-Height : 50px; 글꼴 : 100 14px/1 "Microsoft Yahei"; 국경 : 1px 고체 #3c8dbc; 디스플레이 : 없음; 위치 : 절대; 상단 : 0; 왼쪽 : 0; 배경색 : #fff; 패딩 : 5px; } </style>HTML 부분
<table id = "example1"role = "grid"> <눈물 스타일 = "배경색 : #e4e9f0;"> <tr role = "row"> <th rowspan = "2"style = "text-align : center; width : 6%;" 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 : center; width : 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; 폭 폭 <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> alare </td> <td> alare </td> <td> alare <td> <td> <td> <td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> alare </td> <td> alare </td> <td> alare <td> <td> <td> <td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> alare </td> <td> alare </td> <td> alare <td> <td> <td> <td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> alare </td> <td> alare </td> <td> alare </td> <td> alare <td> <td> <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 ( "마우스 오버", function (e) {cleartimeout (timer); var clientx = e.clientx; var clienty = e.clienty; var txt = $ (this) .text = settimeout (conderx.log (clientx, settimeout); $ (left ", clientx). 클리어 타임 (Timer); hide ();마지막으로 부트 스트랩에는 내용을 표시 할 수있는 구성 요소가 있지만 제목을 표시합니다. 처음에는 변하지 않습니다. 누군가가 깨어 난 후에는 제목을 직접 할당 할 수 있습니다. 제목은 테이블의 텍스트에 제목을 할당하는 것입니다.
마우스가 테이블로 이동할 때이 상자의 전체 내용을 표시하는 코드는 편집기가 공유하는 전체 내용입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.