javascript - 如何通过 javascript 或 jquery 获取下一行列

Question

在我遇到问题的结构下方

<tr>
    <td>1</td>
    <td>2</td>
    <td>
        <button onclick=someFunc() class='btn'>DoSomething</button>
    </tr>
</tr>
<tr>
    <td colspan='3' style = "height: 400px; width: 500px">
        <div id='container'></div>
    </td>
</tr>

在这里，当按下按钮时，我无法访问 id colspan ='3' 的列和 id 'container' 的 div 。 我知道这是一个非常菜鸟的问题，但我是 javasript 的新手，找不到有很好解释的具体问题。

这里我试图访问我的 div

$(".btn").click(function(){
    $(this).parent('tr').next('td').hide();
});

编辑

它的一些信息顺序表。当单击按钮时，相应的 div 必须隐藏或显示图形。图表将位于 class =“container”的 div 中。所以我的想法是显示一些统计信息，如果用户想显示图表，我就给他看。

Answer 1

该按钮的父级是 td 而不是 tr，您需要使用 closest()查找包含该按钮的 tr，然后使用 .next()获取下一个 tr 元素和 .find('td')找到其中的td

jQuery(function($) {
  $(".btn").click(function() {
    $(this).closest('tr').next().find('td').hide();
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>
      <button onclick=someFunc() class='btn'>DoSomething</button>
    </td>
  </tr>
  <tr>
    <td colspan='3' style="height: 400px; width: 500px">
      <div id='container'>soemthing</div>
    </td>
  </tr>
</table>