带有数据表插件的可折叠表

Posted 2023-03-06

【中文标题】带有数据表插件的可折叠表

【英文标题】：Collapsible table with data table plug-in

【发布时间】：2014-05-10 08:12:53

【问题描述】：

我正在使用data table plug-in 进行分页..现在我想要点击表格每一行的可折叠功能...

这是我的代码的 sn-p：

 <tr class="outer-tr">
     <td>1</td>
     <td>pppol</td>
     <td>Approved</td>
</tr>
<tr class="inner-tr"> 
       <td>show-hide</td> 
</tr> 

我在点击outer-tr时隐藏/显示inner-tr。 但它给出了一个错误：

 Uncaught TypeError: Cannot read property 'className' of undefined 

我知道这是因为表格格式不正确..

有什么建议用数据表插件实现折叠表吗？？？

【问题讨论】：

您需要为您提供 javascript 来呈现表格

【参考方案1】：

在您的代码中添加 jquery 脚本：

$(function()   
   $('.outer-tr').click(function() 
      $('.outer-tr td').toggleClass('visible');
   );
   $('.inner-tr').click(function() 
      $('.inner-tr td').toggleClass('visible');
   );
);

还添加一个css样式

tr tddisplay: none;
tr td.visibledisplay: block;

【参考方案2】：

JQuery DataTable documentation 在这里解释，如果您需要更多帮助，请提供您的 JS 代码。