将带有封闭标记的html表行分组

时间:2017-10-02 20:28:47

标签: javascript html html-table

我希望能够使用分配给它们的公共属性访问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或span中。是否有其他方法将<tr>元素分组为相同的效果?

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

你可以在它们上放一个class,然后按类查询,所以

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

变为

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

答案 2 :(得分:0)

如何为每个行分配CREATE TABLE t_test_multiple_pk_fields ( key1 int NOT NULL, key2 int NOT NULL, constraint pk_test PRIMARY KEY (key1, key2), value1 int, value2 int) DECLARE @Data_Table_Name sysname, @Data_Table_Key sysname SELECT @Data_Table_Name = 't_test_multiple_pk_fields' SELECT Data_Table_Key = COLUMN_NAME FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE WHERE OBJECTPROPERTY(OBJECT_ID(CONSTRAINT_SCHEMA + '.' + QUOTENAME(CONSTRAINT_NAME)), 'IsPrimaryKey') = 1 AND TABLE_NAME = @Data_Table_Name SELECT @Data_Table_Key = COLUMN_NAME FROM INFORMATION_SCHEMA.KEY_COLUMN_USAGE WHERE OBJECTPROPERTY(OBJECT_ID(CONSTRAINT_SCHEMA + '.' + QUOTENAME(CONSTRAINT_NAME)), 'IsPrimaryKey') = 1 AND TABLE_NAME = @Data_Table_Name SELECT @Data_Table_Key 并调用class=hideme_sometimes