Вход

Просмотр полной версии : Узнать ширину ячеек таблицы


sashgera
28.09.2023, 18:30
Здравствуйте
Есть таблица (с айди), в которой 4 ячейки в каждой строке
Подскажите, как можно узнать ширину каждой ячейки (в td айди нет)
(без jQuery)
ширину всей таблицы узнаю так:

document.body.onload = function() {
tbl = document.getElementById('iItemTbl');
tbl = tbl.offsetWidth;
document.getElementById("zzz").innerText = tbl;
}

Nexus
28.09.2023, 18:33
Попробуйте как-то так:
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('#iItemTbl td').forEach(function (node) {
console.log(node, node.offsetWidth);
});
});

voraa
28.09.2023, 18:42
document.body.onload = function() {
const tbl = document.getElementById('iItemTbl');
const tblwidth = tbl.offsetWidth;
const cellwidth = [];
const cells = tbl.rows[0].cells;
for (let i = 0; i < cells.length; i++) {
cellwidth.push(cells[i].offsetWidth)
}
document.getElementById("zzz").innerText = tblwidth +' ' + cellwidth.join(',');
}


или короче
document.body.onload = function() {
const tbl = document.getElementById('iItemTbl');
const tblwidth = tbl.offsetWidth;
const cells = tbl.tBodies[0].rows[0].cells;
const cellwidth = Array.from(cells, (cell) => cells[i].offsetWidth);
document.getElementById("zzz").innerText = tblwidth +' ' + cellwidth.join(',');
}

sashgera
28.09.2023, 19:02
voraa, да, ширину ячеек получил, но все размеры ширины в одной переменной cellwidth, как можно сделать - четыре переменной с размерами для каждой ячейки
да, забыл написать, JS будет для гаджета windows 7, который использует IE8

sashgera
28.09.2023, 19:04
Nexus, к сожалению JS не выполняется, извините, но я забыл написать что нужно с поддержкой IE8 (для гаджета Windows 7)

sashgera
28.09.2023, 19:10
voraa, разобрался, cellwidth[0] cellwidth[1]... Спасибо!

sashgera
28.09.2023, 19:19
voraa, еще вопрос, поможете? Как переменную с шириной ячейки применить к td, так не получается:

document.body.onload = function() {
tbl = document.getElementById('iItemTbl');
tblwidth = tbl.offsetWidth;
cellwidth = [];
cells = tbl.tBodies[0].rows[0].cells;
for ( i = 0; i < cells.length; i++) {
cellwidth.push(cells[i].offsetWidth)
}
tbl = cellwidth[2];
document.getElementById("zzz").innerText = tbl;
}


?????

<td style="width:'+tbl+'px;"></td>

рони
28.09.2023, 19:58
sashgera,
Свойство style (https://learn.javascript.ru/styles-and-classes#svoystvo-style)

sashgera
28.09.2023, 20:58
рони, разобрался, спасибо!

document.getElementById('linksHeadings').rows[0].cells[0].style.width = tbl;