Jquery如何隐藏所有的tr只显示一个，当更多的点击

jquery how to hide all the tr show only the one when more is clicked

本文关键字：一个 隐藏所 tr Jquery 显示      更新时间：2023-09-26

请我有这个表下面的li在一个td和另一个tr在每一个tr，我希望所有的tr与类hideme被隐藏，直到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被点击另一个会自动隐藏使用jquery最好的方法是什么你还会注意到我把一个tr放在另一个tr中这在道德上是正确的因为我想在tr中增加一个新的行可以放更多的信息

试试这个HTML &代码(演示)

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();
    });
});
相关文章：