Question

请我在下面的表中有一个td里面的li和每个tr里面的另一个tr，我希望隐藏所有带有类hideme的tr，直到li与类viewmoreInfo被点击它只会在那个tr中显示tr，我只想显示有关所点击的特定区域的信息。

 <table id='tableInfo'>
  <tbody>     
  <tr>    
  <td class='serviceOperator'>
  <ul><li class="Li_OP">ABC </li>
  <li class="BType">Marcapolo</li>
  <li class="viewmoreInfo"><span >More </span></li>
  </ul>
  </td>
  <td class='timeDept'>00:00</td>
  <td  class='timeArr'>00:00</td>
  <td class='seatType'>40 Seater</td>
  <td class='fairCh'><span class='currency'>N</span> 3 000</td>
  <tr class='hideMe'><td >More info about the parent tr</td> </tr>
  </tr>

  <tr>    
  <td class='serviceOperator'>
  <ul><li class="Li_OP">another ABC </li>
  <li class="BType">Marcapolo</li>
  <li class="viewmoreInfo"><span >More </span></li>
  </ul>
  </td>
  <td class='timeDept'>00:00</td>
  <td  class='timeArr'>00:00</td>
  <td class='seatType'>40 Seater</td>
  <td class='fairCh'><span class='currency'>N</span> 3 000</td>
  <tr class='hideMe'><td >More info about the parent tr</td> </tr>
  </tr>

   <tr>    
  <td class='serviceOperator'>
  <ul><li class="Li_OP">third ABC </li>
  <li class="BType">Marcapolo</li>
  <li class="viewmoreInfo"><span >More </span></li>
  </ul>
  </td>
  <td class='timeDept'>00:00</td>
  <td  class='timeArr'>00:00</td>
  <td class='seatType'>40 Seater</td>
  <td class='fairCh'><span class='currency'>N</span> 3 000</td>
  <tr class='hideMe'><td >More info about the parent tr</td> </tr>
  </tr>
  </tbody>
  </table>

我尝试使用此代码，但它只显示所有隐藏的tr

$(document).ready(function(){
  $(".hideMe").hide();
$(".viewmoreInfo").click(function(){
  $(".hideMe").toggle();
});

});

我只是希望它只显示点击打开的tr，如果另一个tr被点击，另一个tr自动隐藏请用jquery做这个的最佳方法你也会注意到我放了一个tr在另一个tr内部是道德上正确的，因为我想在tr中有一个新行，我可以放更多信息

Answer 1

试试这个HTML＆amp;代码（demo）

HTML

<table id='tableInfo'>
    <tbody>
        <tr>
            <td class='serviceOperator'>
                <ul>
                    <li class="Li_OP">ABC</li>
                    <li class="BType">Marcapolo</li>
                    <li class="viewmoreInfo"><span>More </span>

                    </li>
                </ul>
            </td>
            <td class='timeDept'>00:00</td>
            <td class='timeArr'>00:00</td>
            <td class='seatType'>40 Seater</td>
            <td class='fairCh'><span class='currency'>N</span> 3 000</td>
        </tr>
        <tr class='hideMe'>
            <td colspan="5">More info about the parent tr</td>
        </tr>
        <tr>
            <td class='serviceOperator'>
                <ul>
                    <li class="Li_OP">another ABC</li>
                    <li class="BType">Marcapolo</li>
                    <li class="viewmoreInfo"><span>More </span>

                    </li>
                </ul>
            </td>
            <td class='timeDept'>00:00</td>
            <td class='timeArr'>00:00</td>
            <td class='seatType'>40 Seater</td>
            <td class='fairCh'><span class='currency'>N</span> 3 000</td>
        </tr>
        <tr class='hideMe'>
            <td colspan="5">More info about the parent tr</td>
        </tr>
        <tr>
            <td class='serviceOperator'>
                <ul>
                    <li class="Li_OP">third ABC</li>
                    <li class="BType">Marcapolo</li>
                    <li class="viewmoreInfo"><span>More </span>

                    </li>
                </ul>
            </td>
            <td class='timeDept'>00:00</td>
            <td class='timeArr'>00:00</td>
            <td class='seatType'>40 Seater</td>
            <td class='fairCh'><span class='currency'>N</span> 3 000</td>
        </tr>
        <tr class='hideMe'>
            <td colspan="5">More info about the parent tr</td>
        </tr>
    </tbody>
</table>

我移动了<tr class='hideMe'>旁边的父<tr>，然后将colspan="5"添加到了hideMe行中的<td>。

脚本

$(document).ready(function () {
    $(".hideMe").hide();
    $(".viewmoreInfo").click(function () {
        $(this).closest('tr').next(".hideMe").toggle();
    });
});

jquery如何隐藏所有tr只显示单击更多时的

1 个答案: