javascript - How do I collapse a table row in Bootstrap?

Question

Welcome To Ask or Share your Answers For Others

javascript - How do I collapse a table row in Bootstrap?

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I am using Bootstrap 2.3.2 in my app and I need to completely hide a row using the collapse plugin. Below is an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Collapse test</title>
        <link href="css/bootstrap.css" rel="stylesheet">
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap-collapse.js"></script>
    </head>
    <body>

    <table class="table table-bordered table-striped">
        <tr>
            <td>
              <button type="button" class="btn" data-toggle="collapse" data-target="#collapseme">
                Click to expand
              </button>
            </td>
        </tr>
        <tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>
    </table>
</body>
</html>

This will correctly show and hide the contents of the row, but the collapsed row is still visible. See this screenshot:

Collapsed row still visible

The grey line in the screenshot shows the extra row. What can I do to completely remove this row from view?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

272 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:34:55+0000

You are using collapse on the div inside of your table row (tr). So when you collapse the div, the row is still there. You need to change it to where your id and class are on the tr instead of the div.

Change this:

<tr><td><div class="collapse out" id="collapseme">Should be collapsed</div></td></tr>

to this:

<tr class="collapse out" id="collapseme"><td><div>Should be collapsed</div></td></tr>

JSFiddle: http://jsfiddle.net/KnuU6/21/

EDIT: If you are unable to upgrade to 3.0.0, I found a JQuery workaround in 2.3.2:

Remove your data-toggle and data-target and add this JQuery to your button.

$(".btn").click(function() {
    if($("#collapseme").hasClass("out")) {
        $("#collapseme").addClass("in");
        $("#collapseme").removeClass("out");
    } else {
        $("#collapseme").addClass("out");
        $("#collapseme").removeClass("in");
    }
});

JSFiddle: http://jsfiddle.net/KnuU6/25/

Categories

javascript - How do I collapse a table row in Bootstrap?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags