Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Узнать ширину ячеек таблицы (https://javascript.ru/forum/dom-window/85511-uznat-shirinu-yacheek-tablicy.html)

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

sashgera 28.09.2023 20:58

рони, разобрался, спасибо!
document.getElementById('linksHeadings').rows[0].cells[0].style.width =  tbl;


Часовой пояс GMT +3, время: 14:22.