HTML Table Solution Максимальный предел высоты для строк или ячеек путем увеличения ширины таблицы, Javascript
Я работаю над очень простым решением Javascript, которое полезно при использовании overflow-x:auto
в таблицах скрипт для уменьшения высоты строк путем увеличения ширины таблицы до тех пор, пока строки не уменьшатся до желаемой высоты (я также нашел другие вопросы с той же проблемой высоты).
Теперь для завершения этого сценария осталось только 2 вещи:
- Получить и проверить таблицу оптимально для каждой высоты строки (без этого она практически бесполезна)
- Упрощение кода, если это возможно.
Мой Javascript (проверяет только определенную строку):
var h = document.getElementsByTagName('table')[0].rows[1].offsetHeight;
if (h > 200) {
document.getElementsByTagName('table')[0].style.width = "2000px";
var h = document.getElementsByTagName('table')[0].rows[1].offsetHeight;
if (h > 200) {
document.getElementsByTagName('table')[0].style.width = "3000px";
var h = document.getElementsByTagName('table')[0].rows[1].offsetHeight;
if (h > 200) {
document.getElementsByTagName('table')[0].style.width = "4000px";
}
}
}
Пожалуйста помоги мне с этим...
Я думаю, может быть, есть простой код, который я не знаю, потому что я новичок в javascript, но вы, ребята, можете знать этот простой код...
РЕДАКТИРОВАТЬ: Наконец, это рабочий код, если вы хотите ограничить высоту строк таблицы:
var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
while (row.offsetHeight > 160 && j < 4000) {
j += 300;
table.style.width = j + 'px';
}
}
ИЛИ ЖЕ
for (var i = 0, row; row = document.getElementsByTagName('table')[0].rows[i]; i++) {
if (row.offsetHeight > 200) {
document.getElementsByTagName('table')[0].style.width = "1500px";
if (row.offsetHeight > 200) {
document.getElementsByTagName('table')[0].style.width = "2000px";
if (row.offsetHeight > 200) {
document.getElementsByTagName('table')[0].style.width = "2500px";
}
}
}
}
1 ответ
Никто не ответил на этот вопрос, но я сам нашел решение:
Оба будут работать:
var i = 0,
j, row, table = document.getElementsByTagName('table')[0];
while (row = table.rows[i++]) {
j = 1000;
while (row.offsetHeight > 200 && j < 2500) {
j += 500;
table.style.width = j + 'px';
}
}
ИЛИ ЖЕ
for (var i = 0, row; row = document.getElementsByTagName('table')[0].rows[i]; i++) {
if (row.offsetHeight > 200) {
document.getElementsByTagName('table')[0].style.width = "1500px";
if (row.offsetHeight > 200) {
document.getElementsByTagName('table')[0].style.width = "2000px";
if (row.offsetHeight > 200) {
document.getElementsByTagName('table')[0].style.width = "2500px";
}
}
}
}