Question

我正在使用tablesorter.js来排序我的html表。我的桌子是嵌套。单击第一行，其子行将打开。为此我是使用ajax调用。在ajax页面上，我有父行的子行。现在问题是我的父页面上有以下代码：

 <table class="sortable">
    <thead>            
        <tr class="row">
            <th class="list_gradient"> Organization Name</th>
            <th class="list_gradient"> Vat No</th>
        </tr>
    </thead>   
    <tr class="row">
        <td align="center">
            <a href="#&test=<?php echo  $CUSTOMER_ID?>">
            <img src="include/images/plus.png" onClick="toggleImg(this);toggleDiv('<?php echo $CUSTOMER_ID ?>');displayDetails('<?php echo $CUSTOMER_ID ?>');"/><b></b></a>
            <input type="hidden" value="<?php echo $CUSTOMER_ID;?>" id="reqdId<?php echo $CUSTOMER_ID ?>"/>                             
            <?php echo $org_name?>
        </td>
        <tr>
            <td colspan="11">
                <div class="hidden_rows" id="<?php echo $CUSTOMER_ID ?>" style="display:none; width:100%;"> 
                </div>
            </td>
        </tr>              
    </tr>
</table>

上面是我的表，没有tablesorter正常工作。如果我曾经点击表格的标题，它会被排序，但它也显示了额外的行，这是我对我的孩子行。

        <td colspan="11">
            <div class="hidden_rows" id="<?php echo $CUSTOMER_ID ?>" style="display:none; width:100%;"> 
            </div>
        </td>
    </tr>

如果我从表中删除上面的代码，那么只有tablesorter不会显示我的额外行。但事情是我无法删除上面的代码。我必须在排序类中隐藏这些行。我尝试使用hide()方法，但它对我没用。

下面是我在表格中隐藏额外行的代码。

$(function(){

    $("table").tablesorter();
    $(".sortable").click(function(){
       $("hidden_rows").hide(); 
    });


});

Answer 1

HTML无效。您无法将tr嵌套在另一个tr中。而是将<td colspan="11">移动到嵌套表中：

<tr class="row">
  <td align="center">...</td>
  <td>
    <table>
      <tr>
        <td colspan="11">...</td>
      </tr>
    </table>
  </td>
</tr>

如何删除tablesorter.js中的额外行？

1 个答案: