[英]jquery how to hide all the tr show only the one when more is clicked
please i have this table below with li inside a td and another tr inside every tr, i want all the tr with class hideme to be hidden till li with class viewmoreInfo is clicked it will only display the tr with in that tr, i just want to display info about that particular area clicked. 请在下面的这张表中,在td中包含li,在每个tr中包含另一个tr,我希望隐藏所有具有hideme类的tr,直到单击带有class viewmoreInfo的li时,它只会显示该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>
i tried using this code but it just shows all the hidden tr 我尝试使用此代码,但它只显示所有隐藏的tr
$(document).ready(function(){
$(".hideMe").hide();
$(".viewmoreInfo").click(function(){
$(".hideMe").toggle();
});
});
i just want it to show only the tr that's clicked to open and if another tr is clicked the other one hides automatically please what is the best way to do this with jquery you will also notice am putting a tr inside another tr is that morally correct because i want a new row in the tr where i can put more info 我只希望它只显示被单击打开的tr,如果单击另一个tr会自动隐藏另一个tr,请问用jquery做到这一点的最佳方法是什么,您还会注意到将tr放在另一个tr内在道德上是正确的因为我想在tr中添加新行,以便在其中放置更多信息
Try this HTML & code ( demo ) 试试这个HTML和代码( 演示 )
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>
I moved the <tr class='hideMe'>
's next to the parent <tr>
, then added colspan="5"
to those <td>
's in the hideMe row. 我将
<tr class='hideMe'>
移到了父<tr>
的旁边,然后在hideMe行中的那些<td>
添加了colspan="5"
。
Script 脚本
$(document).ready(function () {
$(".hideMe").hide();
$(".viewmoreInfo").click(function () {
$(this).closest('tr').next(".hideMe").toggle();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.