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

时间：2017-03-30 11:14:34

标签： jquery html css twitter-bootstrap

我有这个例子，我已成功将表格折叠，但它只是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翻到按钮阅读更多

2 个答案:

答案 0 :(得分：3)

$('.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>

答案 1 :(得分：0)

jQuery代码

$('button').click(function() {
      $(this).parents('tr')
        .closest('tbody')
        .next('.section')
        .toggle('slow');
    });
 });

请像上面一样编辑您的代码。

另请参阅工作示例

https://jsfiddle.net/bilawalkhan/2d1y1592/

希望这会有所帮助。感谢

相关问题
最新问题