数据表（行详细信息）：未捕获的类型错误：无法读取未定义的属性“样式”

Posted 2023-05-07

【中文标题】数据表（行详细信息）：未捕获的类型错误：无法读取未定义的属性“样式”

【英文标题】：Datatables (Row Details): Uncaught TypeError: Cannot read property 'style' of undefined

【发布时间】：2018-07-14 07:20:25

【问题描述】：

我正在尝试实现数据表行详细信息

这是我的表，ID 为“user_datas”

<table id="user_datas" class="table table-bordered table-striped" >
     <thead>
       <tr>
         <th>NAME</th>
         <th>SEX</th>
         <th>BIRTHDATE</th>
         <th>AGE</th>
       </tr>
     </thead>
  </table>

这是来自我试图实现的数据表文档的代码

function format ( d ) 
    return 'Name: '+d.name+'<br>'+
   'Gender: '+d.sex+'<br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.';


$(document).ready(function() 
    var dataTable = $('#user_datas').DataTable(
      "processing":true,
      "serverSide":true,
      "order":[],
      "ajax":
        url:"../controller/fetch_senior_citizen.php",
        type:"POST"
      ,

      "columns": [
          
            "class":          "details-control",
            "orderable":      false,
            "data":           null,
            "defaultContent": ""
          ,
           "data": "name" ,
           "data": "sex" ,
           "data": "birthdate" ,
           "data": "age" 
      ],
        "order": [[1, 'asc']]
    );

     // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#user_datas tbody').on( 'click', 'tr td.details-control', function () 
        var tr = $(this).closest('tr');
        var row = dataTable.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) 
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        
        else 
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) 
                detailRows.push( tr.attr('id') );
            
        
     );

    // On each draw, loop over the `detailRows` array and show any child rows
    dataTable.on( 'draw', function () 
        $.each( detailRows, function ( i, id ) 
            $('#'+id+' td.details-control').trigger( 'click' );
         );
     );                    
);

这是我的一些来自 fetch_senior_citizen.php 的代码

foreach($result as $row)

    $name = clean($row["f_name"])." ".clean($row["m_name"])." ".clean($row["l_name"]);
    $sub_array = array();
    $sub_array["id"] = $row['id'];
    $sub_array["name"] = $name;
    $sub_array["sex"] = strtoupper($row["sex"]);
    $sub_array["birthdate"] = $row["birthdate"];
    $sub_array["age"] = $row["age"];
    $data[] = $sub_array;


$output = array(
    "draw"              =>  intval($_POST["draw"]),
    "recordsTotal"      =>  $filtered_rowsz,
    "recordsFiltered"   =>  get_total_all_records4(),
    "data"              =>  $data
);
echo json_encode($output, JSON_PRETTY_PRINT);

我当前面临的错误是 Uncaught TypeError: Cannot read property 'style' of undefined 但如果我删除此代码

    "class": "details-control",
    "orderable": false,
    "data": null,
    "defaultContent": ""

一切正常。但我的表没有行详细信息

【参考方案1】：

问题解决了！我只是忘了在广告上放一个空的 th

【讨论】：

谢谢哥们。我花了几个小时来找出这个愚蠢的错误。

花这么多时间来解决这样一个小问题，结果发现我错过了一个

，这让我感到非常难过。谢谢！