javascript - 使用javascript根据另一个表中的行数更改表宽

Question

我的 Html 页面有 2 个表:

• 第一个表，带有 class='af_column_column-header-table' 和 id='Table1'`。
• 第二张表。

CSS :

.af_column_column-header-table { 
     width = 100% !important;
 }

问题:

• 如果第二个表有多行那么将第一个表格宽度设置为 99.3%。

• 我只想对第一个表执行此操作。

  PS:我的页面上有很多表格使用相同的样式类af_column_column-header-table。

Answer 1

您可以在 :first-child 的帮助下使用 querySelectorAll 选择第一个表，然后使用 .style.width 设置样式> :

var rows_count = document.querySelectorAll('table.af_column_column-header-table:first-child tr').length;

if( rows_count > 1){
  document.getElementById('Table1').style.width = '99.3%';
}

i have many tables on my page that uses the same style class af_column_column-header-table i want to do that for the first table only.

这将通过使用 :first-child 选择器来实现。