onclick顯示/隱藏下一個表格行

onclick 獲取按鈕顯示/隱藏單擊的按鈕和下一個按鈕之間的下一行。如何首先將這些行顯示為隱藏，然后我可以在顯示和隱藏它們之間切換。如果可以使用 vanilla javascript 和 css。

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

<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>

uj5u.com熱心網友回復：

這里實作你想要的關鍵是使用 .nextUntil("tr:has(button)")

如：

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

演示

顯示代碼片段

$('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>

uj5u.com熱心網友回復：

使用vanillajavascript，您可以利用該indexOf方法查找包含單擊按鈕的表格行元素所在的位置，然后遍歷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>

標籤：javascript html 查询 css

上一篇：如果資料不存在，則在圖表中顯示“未定義%”

下一篇：newFunction()回傳最后一個值？