用jquery在一页中显示/隐藏多个表的td答案

【问题标题】：display / hide td of multiple table with jquery in one page用jquery在一页中显示/隐藏多个表的td
【发布时间】：2022-01-22 03:11:21
【问题描述】：

我在一页中有多个表，想在 jquery 中添加更多/关闭 td 函数，但我做不到。不知道哪里错了，效果不明显。

  <table class="table" ><tr>
        <td>    bla bla</td>
        <td>    bla bla</td>
        <td>    bla bla</td>
        <td>    bla bla</td>
    </tr>
      <button type="button" class="btn btn-info btnods">+</button>
    </table>
    
    <table class="table" ><tr>
        <td>    bla bla</td>
        <td>    bla bla</td>
        <td>    bla bla</td>
        <td>    bla bla</td>
    </tr>
      <button type="button" class="btn btn-info btnods">+</button>
    </table>
  
    
    <script>
    $(".btnods").on('click',function() {
      if ($(this).text() == "+") {
        $(this).siblings('.table').find("td").slice(0,20).show();
        $(this).html("Kapat");
      } else {
    
        $(this).siblings('.table').find("td").hide().slice(0, 80).show();
        $(this).html("+");
      }
    });
    
    </script>

感谢您的帮助。

【问题讨论】：

您希望能够通过单击加号按钮来添加更多表格？
不，不是表格，我只想显示/隐藏表格或表格单元格的 td 功能，您如何调用
首先你的按钮不是表的兄弟，而是一个孩子。第二个按钮不是表格的有效子项
那我该如何解决这个问题？
点击+，您想在表格中添加更多行吗？是这个问题吗？

标签： javascript jquery

【解决方案1】：

你可以这样做：

$(".btnods").on('click', function() {
  if ($(this).text() == "+") {
    $(this).next('.table').find("td").slice(0, 20).hide();
    $(this).html("Kapat");
  } else {
    $(this).next('.table').find("td").hide().slice(0, 80).show();
    $(this).html("+");
  }
});

请注意，正如我所说，按钮不是表格的有效子项。其次，您需要在您的情况下使用.next()。第三，你在两个地方都使用了.show()。

演示

$(".btnods").on('click', function() {
  if ($(this).text() == "+") {
    $(this).next('.table').find("td").slice(0, 20).hide();
    $(this).html("Kapat");
  } else {
    $(this).next('.table').find("td").hide().slice(0, 80).show();
    $(this).html("+");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btnods">+</button>
<table class="table">
  <tr>
    <td> bla bla</td>
    <td> bla bla</td>
    <td> bla bla</td>
    <td> bla bla</td>
  </tr>
</table>

<button type="button" class="btn btn-info btnods">+</button>
<table class="table">
  <tr>
    <td> bla bla</td>
    <td> bla bla</td>
    <td> bla bla</td>
    <td> bla bla</td>
  </tr>
</table>

【讨论】：

不幸的是，它没有用
您是否将按钮移出您的桌子？你确定使用.hide()