Quero implementar essa função, porque há muitas palavras em uma tabela, por isso uso o método de transbordamento de texto, mas não consigo ver o conteúdo específico na tabela. Quero perceber que, quando o mouse for movido, o conteúdo oculto pode ser exibido nesta linha. É claro que existem muitos plug-ins neste site, mas eu não o usei, então escrevi um.
Parte css
<estilo> #showbox {width: 150px; min-height: 50px; font: 100 14px/1 "Microsoft yahei"; borda: 1px Solid #3C8DBC; Display: Nenhum; Posição: Absoluto; Top: 0; esquerda: 0;parte html
<tabela id = "Exemplo1" role = "grade"> <tow style = "cor de fundo: #e4e9f0;"> <tr role = "linha"> <th rowspan = "2" style = "text-align: centro; largura: 6%;" colspan = "1"> <font style = "font-weight: Bold;"> Número de série </font> </th> <th rowspan = "2" style = "text-align: Center; largura: 10%;" colspan = "1"> <font style = "font-weight: Bold;"> nome </font> </th> <th rowspan = "2" style = "text-align: category </font> </th> <th rowspan =" 2 "style =" text-align: Center; largura: 8%; "colspan =" 1 "> <font style =" font-weight: BOLD; "> unidade </font> </th> <th rowspan =" 2 "style =" text-align: Center; largura: 26%; "colspan =" 1 "> <font style =" font-weight: BOLD; "> Requisitos de conquista </font> </th> <th colspan =" 2 "style =" text-align: Center; "ROWSPAN =" 1 "> <font style =" font-weight: Bold; "> Progress </font> </th> </tr> <tr role =" linha "> <th style =" text-align: Center; Largura: 30%; "rowspan =" 1 "colspan =" 1 "> <font style =" font-weight: Bold; "> mais recente progresso </font> </th> </th> </tr> </tman> <tbody> <tr Role = "Linha"> <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> <t. d> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> al são </td> <td> alare </td> <td> </tr> <tr> <tr> <td> </td> <tr> <tr> <td> </td> <tr> <tr> <tr> </td> <tr> <tr Role = "Linha"> <td> 3 </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> alare </td> <td> </td> </trd> </td> <bty> <dd> <drex> </td </td> <td> </"</td> </tdbody> <dod> <dd>
JS parte
$ (function () {função showbox (obj, caixa) {var timer = null; $ (obj) .on ("mouseOver", function (e) {clearTimeout (timer); var clientx = e.clientX; var clienty = e.clienty; var txt = $) .Text. cliente); $ (caixa) .css ("esquerda", clientx) .css ("top", cliente); if (txt == "") {$ (caixa) .hide ();} else {$ (caixa) .show (); $ (caixa) .html (txt);}},}, 1000);}); $ (obj) .on ("mouseout", function () {cleartimeout (timer); $ (caixa) .hide ();});} showbox ("#exemplo1> tbody td", "#showbox");});Finalmente, há um componente no bootstrap que pode exibir o conteúdo, mas mostra o título. Não mudará no início. Depois que alguém acorda, você pode atribuir diretamente o título, que está apenas atribuindo o título ao texto na tabela.
O acima exposto é o conteúdo completo desta grade com base no código JS que o editor apresentou quando a tabela de pau do mouse é exibida. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!