html onclick显示/隐藏下一个表格行

djp7away 于 9个月前发布在其他

关注(0)|答案(3)|浏览(125)

onclick获取按钮显示/隐藏单击按钮和下一步按钮之间的下一行。
如何显示这些行作为隐藏的第一和之后，我可以切换显示和隐藏他们。如果这是可能的香草JavaScript和CSS。

table,
th,
td {
  border: 1px solid black;
}

个字符

Html

来源：https://stackoverflow.com/questions/69940148/onclick-show-hide-next-table-rows

3条答案

按热度按时间

izkcnapc1#

这里实现您想要的功能的关键是使用.nextUntil("tr:has(button)")
如：

$('table button').click(function() {
  var n = $(this).closest("tr").nextUntil("tr:has(button)");
  n.toggle()
})

字符串

Demo

$('table button').click(function() {
  var n = $(this).closest("tr").nextUntil("tr:has(button)");
  n.toggle()
})

table,
th,
td {
  border: 1px solid black;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><button>show/hide</button> A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <tr>
    <td><button>show/hide</button> AA</td>
    <td>BB</td>
    <td>CC</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
  <tr>
    <td><button>show/hide</button> AAA</td>
    <td>BBB</td>
    <td>CCC</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test 1</td>
    <td>test 1</td>
    <td>test 1</td>
  </tr>
</table>

赞(0）回复(0）举报 9个月前

px9o7tmv2#

使用vanilla JavaScript，你可以利用indexOf方法来查找包含点击按钮的table-row元素的位置，然后在N行上迭代并切换显示状态。

document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
  /* create an array from the nodelist so that `indexOf` can be used */
  let col=[...document.querySelectorAll('tr')];
  
  /* find the parent table row of the invoking button */
  let tr=this.parentNode.parentNode;
  
  /* find which table row in the array was the event source */
  let index=col.indexOf( tr ) + 1;
  
  /* process the next N records/rows */
  for( let i=index; i < index + 2; i++ ){
    col[i].style.display=col[i].style.display=='table-row' || col[i].style.display=='' ? 'none' : 'table-row'
  }
}))

table, th, td {
  border: 1px solid black;
}
tr{display:table-row}

<table>
        <tr>
            <td><button>show/hide</button> A</td>
            <td>B</td>
            <td>C</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test 1</td>
            <td>test 1</td>
            <td>test 1</td>
        </tr>
        <tr>
            <td><button>show/hide</button> AA</td>
            <td>BB</td>
            <td>CC</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test 1</td>
            <td>test 1</td>
            <td>test 1</td>
        </tr>
        <tr>
            <td><button>show/hide</button> AAA</td>
            <td>BBB</td>
            <td>CCC</td>
        </tr>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
        </tr>
        <tr>
            <td>test 1</td>
            <td>test 1</td>
            <td>test 1</td>
        </tr>
    </table>

赞(0）回复(0）举报 9个月前

t8e9dugd3#

此代码针对两个表行设置。它不适用于两个以上的行。只有2行;隐藏并显示. for( let i=index; i < index + 2; i++ )，其中应使用变量表示数字2。换句话说，必须提前确定有多少行会受到影响。

赞(0）回复(0）举报 9个月前