Question

基于这个封闭的问题：Jquery Show/Hide Multiple Table Rows

我不知道为什么这个tr在我扩展表格时表现得很奇怪：

<tr>
   <td colspan="3" style="background-color: #f2f2f2; height: 20px;"></td>
</tr>

我需要保持它始终可见，这样我才能在'订单'之间获得一些空间。已经尝试过CSS可见性但没有成功。

HTML

<table id="main-data-table" class="table table-striped table-hover">

<tr class="main" style="border-top: 3px #D2D2D2 solid; border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">
    <td colspan="3" class="success" style="background-color: #E1E1E1;">
        <div class="pull-left">
            <a class="main" href="#">109
            </a>
        </div>

    </td>
</tr>
<tr class="cabecalho data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">
    <td style="vertical-align: middle;">Descrição do Produto</td>

    <td class="right">Quantidade</td>
    <td class="right">Valor</td>
</tr>


<tr class= "data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">

    <td>

        <i class="icon-ok 60"></i>
        Dead Rising
    </td>

    <td class="right">1</td>
    <td class="right"><span class="unidade">R$ </span>24.59</td>

</tr>


<tr class= "data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">

    <td>

        <i class="icon-ok 60"></i>
        Kinect Sports
    </td>

    <td class="right">1</td>
    <td class="right"><span class="unidade">R$ </span>70.84</td>

</tr>


<tr class= "data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">

    <td>

        <i class="icon-ok 60"></i>
        Xbox 360 Black Play and Charge Kit
    </td>

    <td class="right">2</td>
    <td class="right"><span class="unidade">R$ </span>80.96</td>

</tr>


<tr class= "data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">

    <td>

        <i class="icon-ok 60"></i>
        Xbox 360 Rechargeable Controller Battery Pack Black
    </td>

    <td class="right">1</td>
    <td class="right"><span class="unidade">R$ </span>41.79</td>

</tr>


<tr class= "data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">

    <td>

        <i class="icon-ok 60"></i>
        Xbox 360 Wireless Controller - Glossy Black
    </td>

    <td class="right">1</td>
    <td class="right"><span class="unidade">R$ </span>77.00</td>

</tr>

<tr class="total data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid; border-bottom: 1px #D2D2D2 solid;">
    <td>Total</td>

    <td class="right">6</td>
    <td class="right"><span class="unidade">R$ </span>295.18</td>               

</tr>
<tr>
    <td colspan="3" style="background-color: #f2f2f2; height: 20px;"></td>
</tr>

<tr class="main" style="border-top: 3px #D2D2D2 solid; border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">
    <td colspan="3" class="success" style="background-color: #E1E1E1;">
        <div class="pull-left">
            <a class="main" href="#">108
            </a>
        </div>

    </td>
</tr>
<tr class="cabecalho data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">
    <td style="vertical-align: middle;">Descrição do Produto</td>

    <td class="right">Quantidade</td>
    <td class="right">Valor</td>
</tr>


<tr class= "data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid;">

    <td>

        <i class="icon-ok 60"></i>
        Kingston DataTraveler 108 16 GB Flash Drive
    </td>

    <td class="right">1</td>
    <td class="right"><span class="unidade">R$ </span>35.11</td>

</tr>

<tr class="total data" style="border-right: 1px #D2D2D2 solid; border-left: 1px #D2D2D2 solid; border-bottom: 1px #D2D2D2 solid;">
    <td>Total</td>

    <td class="right">1</td>
    <td class="right"><span class="unidade">R$ </span>35.11</td>                

</tr>
<tr>
    <td colspan="3" style="background-color: #f2f2f2; height: 20px;"></td>
</tr>

JAVASCRIPT

$(function(){
  $("#main-data-table","body").on({'click':function(event){
    event.preventDefault();
    $(this).closest("tr.main").nextUntil("tr.main").toggle("fast");
   }},
   "a.main",null);
});

CSS

tr.data {display:none;}

Answer 1

我改变了一些事情。验证是否解决了您的问题： http://jsfiddle.net/wG8qf/145/

HTML

<table id="main-data-table" border = "1">
    <tr>
        <th>Main</th>
        <th>Data</th>
    </tr>
    <tr class="main a">
        <td class="main"><a href="#">12345</a></td>
        <td class = "data">11111</td>
    </tr>
    <tr class="main b">
        <td class="main"><a href="#">12345</a></td>
        <td class = "data">11111</td>
    <tr class="main c">
        <td class="main"><a href="#">12345</a></td>  
        <td class = "data">11111</td>
    </tr>
    <tr class="data c">
        <td></td>  
        <td>11111</td>
    </tr>
    <tr class="data c">
        <td></td>  
        <td>11111</td>
    </tr>
    <tr class="data c">
        <td></td>  
        <td>11111</td>
    </tr>
</table>

JAVASCRIPT

$(function(){
      $("#main-data-table").on({'click':function(event){
        event.preventDefault();
        var trClass = $(this).closest("tr.main").attr('class').split(' ')[1];
        console.log(trClass);
        $(this).closest("td.main").nextUntil("td.main").show();
        $(this).closest("#main-data-table").find('tr.'+trClass).show();
       }},
       "td.main a",null);
    });

CSS

.data {display:none;}

使用JQuery显示和隐藏行

1 个答案: