グループhtmlテーブルの行を囲むタグ

Question

共通のプロパティを使用してhtmlテーブルの行のサブグループにアクセスできるようにしたい - JavaScriptを使用して行のペアを消したいとしましょう。それがうまくいけば、それらの行をdivで囲み、そのdivをクラスに割り当てることは完璧でした。

<table><tbody><tr>...</tr> 
 
<div class="hideme_sometimes"><tr>.....</tr><tr>...</tr></div> 
 
<tr>...</tr></tbody></table> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
$("div.hideme_sometimes").hide(); 
 
}); 
 
</script>

しかし、明らかにあなたはdiv要素、またはスパン内のテーブルの部品を配置することはできません。 <tr>要素を同じ効果にグループ化する他の方法はありますか？

Answer 1

複数の行を囲むことができるtbody要素を複数持つことができます。

document.querySelector("button").addEventListener("click", function(){ 
 
    this.setAttribute("hidden", true) 
 
    document.querySelectorAll("tbody")[1].removeAttribute("hidden") 
 
});

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>foo</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody hidden> 
 
    <tr> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<button type="button">more</button>

Answer 2

あなたはただそう

$("div.hideme_sometimes").hide(); 

がそれぞれにclass=hideme_sometimesの割り当てについて

$("tr.hideme_sometimes").hide(); 

Answer 3

どのようになると、クラスによってそれらにclassを入れて、クエリ可能性があり行と呼び出し$(".hideme_sometimes").hide();