Question

我有一个使用 datatables 构建的动态表格。如何在元素上设置鼠标悬停在文本上？我希望每列都有不同的文本，对于第一列，我希望每个行ID都有不同的文本，文本来自我的 php json 文件。

我的js代码：

$(document).ready(function() {
    $('#doentes').DataTable({
     "ajax" :  "functions/getDiagnosticoGeral.php",

     "columns" : [ 
     {
      "data" : "id"
 }, {
      "data" : "abandonos"
 }, {
      "data" : "canal_1"
 }, {
      "data" : "dif_1"
 }, {
      "data" : "venda_1"
 }, {
      "data" : "dif_preco_1"
 }, {
      "data" : "canal_2"
 }, {
      "data" : "dif_2"
 }, {
      "data" : "venda_2"
 }, {
      "data" : "dif_preco_2"
 }, {
      "data" : "canal_3"
 }, {
      "data" : "dif_3"
 }, {
      "data" : "venda_3"
 }, {
      "data" : "dif_preco_3"
 }, {
      "data" : "dif_views"
 }, {
      "data" : "dif_frete_sp"
 }, {
      "data" : "dif_frete_rj"
 }, {
      "data" : "dif_frete_mg"
 }, {
      "data" : "dif_frete_pr"
 }, {
      "data" : "dif_frete_rs"
 }, {
      "data" : "dif_prazo_sp"
 }, {
      "data" : "dif_prazo_rj"
 }, {
      "data" : "dif_prazo_mg"
 }, {
      "data" : "dif_prazo_pr"
 }, {
      "data" : "dif_prazo_rs"
 }, {
      "data" : "requisicoes_cnova"
 }, {
      "data" : "requisicoes_b2w"
 }, {
      "data" : "requisicoes_walmart"
 }, {
      "data" : "requisicoes_shopfacil"
 }, {
      "data" : "requisicoes_magazine"
 }, {
      "data" : "nota"
 }, {
      "data" : "tipo"
 }, {
      "data" : "janela"
 }],

 "scrollX": true,

 "orderFixed": [[ 31, "asc"],[ 32, "asc"],[ 2, "asc"],[ 3, "desc" ]]
});                
});

我的表：

<table id="doentes" class="table table-striped table-hover">
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Abandonos</th>
                          <th>Canal 1</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 2</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 3</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Views</th>
                          <th>Frete SP</th>
                          <th>Frete RJ</th>
                          <th>Frete MG</th>
                          <th>Frete PR</th>
                          <th>Frete RS</th>
                          <th>Prazo SP</th>
                          <th>Prazo RJ</th>
                          <th>Prazo MG</th>
                          <th>Prazo PR</th>
                          <th>Prazo RS</th>
                          <th>Req CNova</th>
                          <th>Req B2W</th>
                          <th>Req Walmart</th>
                          <th>Req Shopfacil</th>
                          <th>Req Magazine</th>
                          <th>Nota</th>
                          <th>Tipo</th>
                          <th>Janela</th>
                        </tr>
                      </thead>
                      <tbody>
                         <tr>
                          <th>Id</th>
                          <th>Abandonos</th>
                          <th>Canal 1</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 2</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Canal 3</th>
                          <th>Pedidos</th>
                          <th>Venda</th>
                          <th>Preço</th>
                          <th>Views</th>
                          <th>Frete SP</th>
                          <th>Frete RJ</th>
                          <th>Frete MG</th>
                          <th>Frete PR</th>
                          <th>Frete RS</th>
                          <th>Prazo SP</th>
                          <th>Prazo RJ</th>
                          <th>Prazo MG</th>
                          <th>Prazo PR</th>
                          <th>Prazo RS</th>
                          <th>Req CNova</th>
                          <th>Req B2W</th>
                          <th>Req Walmart</th>
                          <th>Req Shopfacil</th>
                          <th>Req Magazine</th>
                          <th>Nota</th>
                          <th>Tipo</th>
                          <th>Janela</th>
                         </tr>
                      </tbody>
                    </table>

我尝试了一些类似问题的解决方案，但似乎对我都不起作用。

Answer 1

如果我理解正确，您需要在每个单元格的悬停上使用某种工具提示。为此，您需要将单元格内容更改为允许预览标题的html元素。例如，细胞Abandonos的内容应该是这样的：

<th><span title='The title you wish to show on hover'>Abandonos</span></th>

Answer 2

你需要在css3中使用childs。这里是您可以很好地学习https://www.w3schools.com/css/css_pseudo_classes.asp

的链接

鼠标悬停在带有数据表的文本上

2 个答案: