多个表行扩展/折叠

时间：2017-10-26 08:10:39

标签： javascript jquery html

检查我的代码。当我点击“更多”按钮时，它会在第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>

5 个答案:

答案 0 :(得分：0)

您的问题是按钮具有相同的ID。

在HTML中，id属性在页面中必须是唯一的

改为使用class属性。

这应该有效：

<button type="button" class="btn btn-info expendbtn"></button>
<script>
     $(".table").find("tr").hide().slice(0, 7).show();
     $(".expendbtn").html("More");
     $(".expendbtn").click(function() {
         var foundTr = $(this).parent().find('tr');
         if ($(this).text() == "More") {
             foundTr.show();
             $(this).html("Less");
         } else {
             foundTr.hide().slice(0, 7).show();
             $(this).html("More");
         }
    });
</script>
  

否则，我建议人们使用 jquery.Datatable插件，这是   棒极了！它包含自动搜索字段，分页，ajax加载和可扩展的行，如您所愿;）

答案 1 :(得分：0)

你不应该多次使用id。更好的方法是使用类而不是id。 在jsfiddle中提供了一个工作示例。

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

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

  if ($(this).text() == "More") {
  console.log($(this).parent());
    $(this).parent().find('.table').find("tr").show();
    $(this).html("Less");
  } else {

    $(this).parent().find('.table').find("tr").hide().slice(0, 7).show();
    $(this).html("More");
  }

});

http://jsfiddle.net/g8fzxzcc/1

答案 2 :(得分：0)

你可以从更多/更少的按钮中删除id并使用类（或者只是重命名id但仍然添加一个类）：

<button type="button" class="btn btn-info btn-expand">More</button>

并使用该类作为选择器：

$('.btn-expand').click(function () {
  var $btn = $(this);
  var $rows = $btn.prev('.table').find('tr');

  if ($btn.text() === 'More') {
    $rows.show();
    $btn.text('Less');
  } else {
    $rows.slice(7).hide();
    $btn.text('More');
  }
});

此外，jQuery＆＃39; slice创建了一个包含所有匹配元素的新jQuery对象。所以你要做的就是用所有表中的所有行创建一个jQuery对象。如果那不是您想要的，那么您的代码应该是：

$('.table').each(function () {
  $(this).find('tr').slice(7).hide();
});

＆＃13;
＆＃13; 
$('.table').each(function () {
  $(this).find('tr').slice(7).hide();
});

$('.btn-expand').click(function () {
  var $btn = $(this);
  var $rows = $btn.prev('.table').find('tr');
  
  if ($btn.text() === 'More') {
    $rows.show();
    $btn.text('Less');
  } else {
    $rows.slice(7).hide();
    $btn.text('More');
  }
});
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 btn-expand">More</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 btn-expand">More</button>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

你的jquery犯了几个错误：

1）正如您所说，所有元素都将动态生成，因此元素永远不会触发点击事件，您必须使用on()作为动态元素。

2）使用classes代替id按钮。 Id必须是唯一的。

3） prev()使用this方法，参考按钮，这样您将始终位于与点击按钮对应的表格中。

4）使用each()方法迭代所有表并隐藏所有需要的内容，就像实际上它只适用于第一个表一样。

5）您未使用slice属性，根据其索引选择元素的子集。

下面是工作实例：

＆＃13;
＆＃13; 
$(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");
        }
    });
});
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以使用解决方案

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

$("button").click(function() {
  if ($(this).text() == "More") {
    $(this).siblings('table').find("tr").show();
    $(this).html("Less");
  } else {

    $(this).siblings("table").find("tr").hide().slice(0, 7).show();
    $(this).html("More");
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <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"></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""></button>
    </div>
  </div>
</div>

我使用jQuery兄弟来获取表格。 id应该是唯一的。

希望这会对你有所帮助。

相关问题
最新问题