多表

多表

关注
发信
关注(28)粉丝(399)

javascript - 多表行展开/折叠

检查我的代码如下。当我单击“更多”按钮时，它将显示第6个数字之后的所有行。但是我的目标是在多个表上使用它，因为该表是在我的项目中动态生成的。我有很多表，因此它需要使用倍数表。当我单击按钮时，我也尝试在两个表上使用相同的表，另一个表也显示。那么针对多个表的解决方案是什么？



<!DOCTYPE html>
<html>
<head>
    <title>test</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>


    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th><h4>Main Cat</h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th><h4>Main Cat</h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-info" id="expendbtn"></button>
</div>

</div>



<script type="text/javascript">


$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");

$("#expendbtn").click(function() {

  if ($("#expendbtn").text() == "More") {
    $(".table").find("tr").show();
    $("#expendbtn").html("Less");
  } else {

    $(".table").find("tr").hide().slice(0, 7).show();
    $("#expendbtn").html("More");
  }

});


</script>
</body>
</html>

最佳答案

您在jquery中犯了一些错误：
1）正如您所说的那样，所有元素都是动态生成的，因此元素永远不会触发click事件，您必须对动态元素使用on()。
2）将classes用于按钮而不是id。 ID必须是唯一的。
3）将prev()方法与this一起使用，直到按钮均被引用，因此您将始终在表中与所单击的按钮相对应。
4）使用each()方法遍历所有表并隐藏所有需要的tr，就像您实际上使它仅适用于第一个表一样。
5）您没有适当地使用slice，它会根据其索引选择一个元素子集。
这是工作示例：



$(document).ready(function() {
    $(".table").each(function() {
        $(this).find('tr').slice(7).hide();
    });
    $(".expendbtn").html("More");
    $(document).on("click", '.expendbtn', function() {
        if ($(this).text() == "More") {
            $(this).prev(".table").find("tr").show();
            $(this).html("Less");
        } else {
            $(this).prev(".table").find('tr').slice(7).hide();
            $(this).html("More");
        }
    });
});

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>


    <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th><h4>Main Cat 1</h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-info expendbtn"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
        <table class="table table-striped jambo_table">
            <thead>
                <tr class="headings">
                    <th><h4>Main Cat 2</h4></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
                <tr>
                    <td>Sub cat</td>
                </tr>
        </tbody>
    </table>
    <button type="button" class="btn btn-info expendbtn"></button>
</div>

</div>
</body>
</html>

09-25 18:32
Powered by LMLPHP ©2024 多表 0.029399