Question

我正在使用DataTables，并且我有兴趣将tooltip添加到包含丢失单元格的column中。我想添加一条简单的注释，说明为什么该列中的那些单元格丢失了。我要讲的专栏是第七专栏。

对一个表单元格的列中缺少的单元格进行简单检查如下：

这是我的剧本：

<script> 

$(document).ready(function() {
    $(".se-pre-con").fadeOut("slow");


           $('table thead tr').clone(true).appendTo( 'table thead' );
           $('thead tr:eq(1) th').each( function (i) {
               if(i > 4){
                   $(this).hide()
               }
           })

            $('table').DataTable( {

                fixedHeader: true,

                language: {
                    processing:     "Bitte warten ..",
                    search:         "Suchen",
                    lengthMenu:    "_MENU_ Einträge anzeigen",              
                    info:           "_START_ bis _END_ von _TOTAL_ Einträgen",
                    infoEmpty:      "Keine Daten vorhanden",
                    infoFiltered:   "(gefiltert von _MAX_ Einträgen)",
                    infoPostFix:    "",
                    loadingRecords: "Wird geladen ..",
                    zeroRecords:    "Keine Einträge vorhanden",
                    paginate: {
                        first:      "Erste",
                        previous:   "Zurück",
                        next:       "Nächste",
                        last:       "Letzte"}
                    },

                   initComplete: function () {

                       this.api().columns().every( function () {

                           var column = this;

                           console.log(column.index())
                           var select = $('<select><option value=""></option></select>')
                               .appendTo( $(column.header()).empty() )
                               .on( 'change', function () {
                                   var val = $.fn.dataTable.util.escapeRegex(
                                       $(this).val()
                                   );

                                   column
                                       .search( val ? '^'+val+'$' : '', true, false )
                                       .draw();
                               } );

                           column.data().unique().sort().each( function ( d, j ) {
                               select.append( '<option value="'+d+'">'+d+'</option>' )
                           } );
                       } );
                   }
               } );

       } );

</script>

Answer 1

不知道您使用的是哪种工具提示，因此我只想介绍将Bootstrap工具提示附加到<td>的方式。看一下createdCell-> https://datatables.net/reference/option/columns.createdCell

在createdCell / columns部分中添加columnDefs回调。由于您似乎使用的是静态<table>，而没有任何列定义，因此可以执行以下操作：

columnDefs: [{ 
  targets: 6, //columns are zero based
  createdCell: function(td, cellData) {
    if (cellData === '') {
      $(td).tooltip({ trigger: 'hover', title: 'The cell is empty because ...' })
    }
  }
}],

Answer 2

我不确定在这里是指哪种工具提示，如果它引用了官方jQuery tooltip或其他方式，但是为了修改没有单元格的提示，只需获取对表格，然后遍历table.rows，并按每个行元素检查单元格的数量，如果没有，则向该行添加工具提示。伪代码示例：

table = document.querySelector("table");
Array.apply(0, table.rows).forEach(x => {
    x.cells.length == 0 && (functionToMakeTooltipToRow(x))
});

如何将工具提示添加到包含数据表中缺少单元格的特定列

2 个答案: