Изменить ширину таблицы в зависимости от количества строк в другой таблице, используя JavaScript

Question

Изменить ширину таблицы в зависимости от количества строк в другой таблице, используя JavaScript

1

На моей странице Html есть 2 таблицы:

Первая таблица с class='af_column_column-header-table' and id = 'Table1' '.
Вторая таблица.

css:

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

Проблема:

Если вторая таблица имеет более одной строки, установите первую ширину таблицы на 99,3%.
Я хочу сделать это только для первой таблицы.

PS: У меня на моей странице много таблиц, которые используют тот же класс style af_column_column-header-table.

osfar 06 авг. 2018, в 11:07

Источник

0

document.querySelector('.af_column_column-header-table').rows.length попробуйте это. Даст вам первый в DOM. querySelectorAll() выдаст все таблицы.
Jai 06 авг. 2018, в 08:20
0

if (document.getElementById("Table1").getElementsByTagName("tr").length > 0) затем измените ширину
Hearner 06 авг. 2018, в 08:21
0

Не могли бы вы ввести синтаксис для изменения ширины?
osfar 06 авг. 2018, в 08:37

Показать ещё 1 комментарий

Теги:

javascript

css

css-tables

1 ответ

Ещё вопросы

document.querySelector('.af_column_column-header-table').rows.length попробуйте это. Даст вам первый в DOM. querySelectorAll() выдаст все таблицы.
if (document.getElementById("Table1").getElementsByTagName("tr").length > 0) затем измените ширину
Не могли бы вы ввести синтаксис для изменения ширины?

Zakaria Acharki · Accepted Answer · 2018-08-06T05-40-00.000Z

Вы можете использовать querySelectorAll с помощью :first-child чтобы выбрать первую таблицу, а затем установить стиль, используя .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%';
}

У меня на моей странице много таблиц, которые используют тот же класс style af_column_column-header-table, который я хочу сделать только для первой таблицы.

Это будет достигнуто с использованием :first-child селектора :first-child.