在使用 jquery 数据表时无法读取未定义的属性“样式”

Posted 2023-03-08

【中文标题】在使用 jquery 数据表时无法读取未定义的属性“样式”

【英文标题】：Cannot read property 'style' of undefined on using jquery datatable

【发布时间】：2018-06-18 04:38:53

【问题描述】：

我面临一个错误，使用数据表 jquery 时无法读取未定义的属性“样式”。我知道问题出在 colspan 上，但我不知道要纠正它。请帮我。这是我的 html 代码。

if ($.fn.dataTable) 
            $('.datatable').dataTable(
                "sPaginationType": "full_numbers",
                "defaultContent": "",
                "bDestroy": true,
            );
        

<div class='clearfix'>
   <table class='data display datatable'>
      <thead>
         <tr>
            <th rowspan='2' style='width:40px;'>Request ID</th>
            <th rowspan='2' style='width:40px;'>Date</th>
            <th rowspan='2'>Requested By</th>
            <th rowspan='2'>Product Details</th>
            <th colspan='2' style='width:50px;text-align: center;'>MFC approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>District Officer approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>Finance Officer Approval</th>
            <th rowspan='2' colspan='2' style=' text-align:center;width:100px; '>Action</th>
            <th rowspan='2' style='width:50px;'>Remarks</th>
         </tr>
         <tr>
            <th style='width:50px;'>Name of MFC</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of DO</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of FO</th>
            <th style='width:50px;'>Date of approval</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td><span id='lblRID_'0>3</span></td>
            <td>12/26/2017</td>
            <td><a style='cursor:pointer' onclick='PendingDistribution.fnEmployeeWiseData(30);' >VIVEK RAI (30)</a></td>
            <td>AS<br/>Paracitamol Syrup<br/> … 2 more products</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td style='width:40px;' class='center'><a style='cursor:pointer' onclick='PendingDistribution.fnView(3);' >View</a> </td>
            <td style='width:40px;'><a style='cursor:pointer;' onclick='PendingDistribution.fnRedirect(3);' >Distribute</a></td>
            <td style='width:40px;' class='center'><a style='cursor:pointer;' onclick='PendingDistribution.fnShowRemarks(3);' >Show</a> </td>
         </tr>
      </tbody>
   </table>
</div>

【问题讨论】：

添加您的jquery 代码

@Mr.x 请立即查看。我已经添加了

看来你对 colspan @Bala 的看法是对的。根据论坛，它还不支持：datatables.net/forums/discussion/14/datatables-and-colspan

@DerekNolan 这个问题只出现在第 11 行 colspan 上，但其他地方没有。这就是我不清楚的原因。

@Bala 以及您正在使用的列数。你读过这个吗？ ***.com/questions/39376658/… 。您是否还在项目中创建了多个数据表？

【参考方案1】：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script>
if ($.fn.dataTable) 
  $('.datatable').dataTable(
      "sPaginationType": "full_numbers",
      "defaultContent": "",
      "bDestroy": true,
  );

</script>

<div class='clearfix'>
   <table class='data display datatable'>
      <thead>
         <tr>
            <th rowspan='2' style='width:40px;'>Request ID</th>
            <th rowspan='2' style='width:40px;'>Date</th>
            <th rowspan='2'>Requested By</th>
            <th rowspan='2'>Product Details</th>
            <th colspan='2' style='width:50px;text-align: center;'>MFC approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>District Officer approval</th>
            <th colspan='2' style='width:50px;text-align: center;'>Finance Officer Approval</th>
            <th rowspan='2' colspan='2' style=' text-align:center;width:100px; '>Action</th>
            <th rowspan='2' style='width:50px;'>Remarks</th>
         </tr>
         <tr>
            <th style='width:50px;'>Name of MFC</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of DO</th>
            <th style='width:50px;'>Date of approval</th>
            <th style='width:50px;'>Name of FO</th>
            <th style='width:50px;'>Date of approval</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td><span id='lblRID_'0>3</span></td>
            <td>12/26/2017</td>
            <td><a style='cursor:pointer' onclick='PendingDistribution.fnEmployeeWiseData(30);' >VIVEK RAI (30)</a></td>
            <td>AS<br/>Paracitamol Syrup<br/> … 2 more products</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td>Administrator (1)</td>
            <td>1/3/2018</td>
            <td style='width:40px;' class='center'><a style='cursor:pointer' onclick='PendingDistribution.fnView(3);' >View</a> </td>
            <td style='width:40px;'><a style='cursor:pointer;' onclick='PendingDistribution.fnRedirect(3);' >Distribute</a></td>
            <td style='width:40px;' class='center'><a style='cursor:pointer;' onclick='PendingDistribution.fnShowRemarks(3);' >Show</a> </td>
         </tr>
      </tbody>
   </table>
</div>

【参考方案2】：

这确实与列数有关。确保你的桌子上有相同数量的 th> 和 td>。

【讨论】：

<th> 和 <td> 具有相同的编号