gpt4 book ai didi

jquery - 如何使用 bootstrap 和 jQuery 通过单击表中的按钮来切换展开行

转载 作者:太空宇宙 更新时间:2023-11-03 22:43:14 25 4
gpt4 key购买 nike

我有这个例子,我已经成功地折叠了表格,但它只是 table 中的点击行。

我想改变它,只有点击按钮展开更多数据

See this fiddle

代码片段

$('.flip').click(function() {
$(this)
.closest('tbody')
.next('.section')
.toggle('slow');
});
.section {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<thead>
<tr class="firstline">
<th>CASINO</th>
<th>BONUS</th>
<th>HIGHLIGHTS</th>
<th>DEPOSIT</th>
<th>RATING</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>
</td>
<td>
<button id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 111</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
</tr>
<tr>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
<tr>
<td>item 131</td>
<td>item 132</td>
<td>item 133</td>
<td>item 134</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star-half fa-2x"
aria-hidden="true"></i>
</td>
<td>
<button id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 211</td>
<td>item 212</td>
<td>item 213</td>
<td>item 214</td>
</tr>
<tr>
<td>item 221</td>
<td>item 222</td>
<td>item 223</td>
<td>item 224</td>
</tr>
<tr>
<td>item 231</td>
<td>item 232</td>
<td>item 233</td>
<td>item 234</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>
</td>
<td>
<button id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-deposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star-half fa-2x"
aria-hidden="true"></i>
</td>
<td>
<button id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>
</td>
<td>
<button id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</tbody>
</table>

如果可以让类从 td 翻转到按钮阅读更多

最佳答案

$('.readmore').click(function () {
$(this).closest('table').closest('tbody').next('.section').toggle('slow');
});
.section {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<thead>
<tr class="firstline">
<th>CASINO</th>
<th>BONUS</th>
<th>HIGHLIGHTS</th>
<th>DEPOSIT</th>
<th>RATING</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>
</td>
<td>
<button class="readmore" id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 111</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
</tr>
<tr>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
<tr>
<td>item 131</td>
<td>item 132</td>
<td>item 133</td>
<td>item 134</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star-half fa-2x"
aria-hidden="true"></i>
</td>
<td>
<button class="readmore" id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 211</td>
<td>item 212</td>
<td>item 213</td>
<td>item 214</td>
</tr>
<tr>
<td>item 221</td>
<td>item 222</td>
<td>item 223</td>
<td>item 224</td>
</tr>
<tr>
<td>item 231</td>
<td>item 232</td>
<td>item 233</td>
<td>item 234</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>
</td>
<td>
<button class="readmore" id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-deposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star-half fa-2x"
aria-hidden="true"></i>
</td>
<td>
<button class="readmore" id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan="6" class="flip">
<table>
<tr>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/logosquare-big.png" /><button>PLAY NOW!</button>
</td>
<td>
<div>200% UP TO</div>
<div>$1000</div>
<div>+250 FREE SPINS</div>
</td>
<td>
<ul>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
<li>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-check.png" /> sfgfsjghsjghsjghjsghsjghsj
</li>
</ul>
</td>
<td>
<img src="http://freespins.dev.kim/wp-content/uploads/2017/03/icon-nodeposit.png" />
</td>
<td>
<i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i><i class="fa fa-star fa-2x" aria-hidden="true"></i>
</td>
<td>
<button class="readmore" id="acc1">READ MORE <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tbody class="section">
<tr>
<td>item 311</td>
<td>item 312</td>
<td>item 313</td>
<td>item 314</td>
</tr>
<tr>
<td>item 321</td>
<td>item 322</td>
<td>item 323</td>
<td>item 324</td>
</tr>
<tr>
<td>item 331</td>
<td>item 332</td>
<td>item 333</td>
<td>item 334</td>
</tr>
</tbody>
</table>

关于jquery - 如何使用 bootstrap 和 jQuery 通过单击表中的按钮来切换展开行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43116266/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com