Динамическое изменение таблицы

 
0
 
JavaScript
ava
ОлегDAD | 27.10.2004, 13:04
Я не волшебник, а только учусь.

Подскажите пожалуйста, как из таблицы можно удалить столбец, где нет значений (в данной таблице это 2 столбец - Заг2). Знаю, что можно делать адресацию к каждой ячейке, но как просматривать есть там значение или нет, и как затем удалить полностью столбец я еще не знаю (вернее сам не делал).

HTML
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE ID="TAB" BORDER="1">
<TR>
<TD>Заг1</TD><TD>Заг2</TD><TD>Заг3</TD><TD>Заг4</TD>
</TR>
<TR>
<TD>Данные1</TD><TD> </TD><TD> </TD><TD>Данные4</TD>
</TR>
<TR>
<TD> </TD><TD> </TD><TD>Данные3</TD><TD>Данные4</TD>
</TR>
<TR>
<TD>Данные1</TD><TD> </TD><TD> </TD><TD> </TD>
</TR>
</TABLE>
</BODY>
</HTML>


Если можно дайте ссылку, где похожее встречалось или небольшой пример.


Олег :(
Comments (14)
ava
GoodBoy | 27.10.2004, 12:07 #
тебе именно удалить его надо или скрыть????
ava
ОлегDAD | 27.10.2004, 13:36 #
Вообще-то наверно все равно удалить или скрыть.
У меня просто получается очень большая таблица (столбиков до 300 и более), и поэтому нужно пустые столбики убрать для показа юзеру (а то он будет очень долго гонять скролл) и затем вывести на печать. Клиентом у меня только IE6.

Олег
added later:
Я тут прикинул наверно лучше удалять, потому что затем нужно эту таблицу послать на печать.

Олег
ava
GoodBoy | 27.10.2004, 13:47 #
Цитата
Я тут прикинул наверно лучше удалять, потому что затем нужно эту таблицу послать на печать.

а какая разница???

Если только для ИЕ, то скрыть можно вот так:
var TABLE_elem = document.getElementById("TAB").children[0];
var cInd = номер_нужного_столбца;

for (var i=0; i<TABLE_elem.children.length; i++) {
if (TABLE_elem.children[i].children[cInd].style.display == 'none') {
TABLE_elem.children[i].children[cInd].style.display = 'block';
} else {
TABLE_elem.children[i].children[cInd].style.display = 'none';
}
}
ava
ОлегDAD | 27.10.2004, 14:34 #
Ок, тут все вроде бы понятно. Только, если можно последний вопрос - как проверить есть что-то в ячейке или нет?

Олег
ava
Се ля ви | 27.10.2004, 15:19 #
К вопросу о кроссбраузерной совместимости, обращу внимание на 2 вещи:
Вот как нужно задаваать таблицы для совместимости со всеми браузерами:

<table id="TAB">
   <thead>
       <tr>
           <th>Заг1</th>
           <th>Заг2</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>Знач1</td>
           <td>Знач2</td>
       </tr>
       <tr>
           <td>Знач1</td>
           <td>Знач2</td>
       </tr>
   </tdody>
</table>

т.е. всё содержимое должно находиться внутри тега <tbody> (впринципе, туда же можно и заголовок запихнуть - это будет даже проще в обработке, но я делаю так, чтобы мог отдельно манипулировать заголовком таблицы от её содержимого). Проблема в том, что тег TBODY всегда ставится експлорером в момент компиляции твоей страницы в MSHTML, т.е. перед отображением - поэтому GoodBoy и ставит вызов первого потомка, а не самой таблицы:
Цитата (GoodBoy @ 27.10.2004, 13:47)


var TABLE_elem = document.getElementById("TAB").children[0];


но Mozilla и Opera никуда не преобразует код и отображает просто как он есть - поэтому код и не совместим с ней.

Поэтому после того, как преобразуешь её (таблицу) к приведённому виду, вот универсальный кроссбраузерный код для удаления ячеек внутри секции tbody :
var TABLE_elem =
document.getElementById("TAB").getElementsByTagName("tbody")[0].getElementsByTagName("tr");

var cInd = номер_нужного_столбца;

if (TABLE_elem[0].ChildNodes[0].nodeType != 1) cInd *= 2; /* IE не считает нодом пробельные символы между тегами, а Mozilla и Opera - считают.*/

for (var i=0; i<TABLE_elem.length; i++)
   TABLE_elem[i].removeChild(cInd);
ava
GoodBoy | 27.10.2004, 15:22 #
Цитата
Только, если можно последний вопрос - как проверить есть что-то в ячейке или нет?

Для тех же условий:
if (TABLE_elem.children[i].children[cInd].innerText!='') alert("Что-то есть!")
ava
Се ля ви | 27.10.2004, 15:29 #
Цитата (GoodBoy @ 27.10.2004, 15:22)


Для тех же условий:



Код

if (TABLE_elem.children[i].children[cInd].innerText!='') alert("Что-то есть!")



Тоже, но для всех браузеров:

if (
TABLE_elem[i].ChildNodes[cInd].hasChildNodes() &&
TABLE_elem[i].ChildNodes[cInd].firstChild.nodeValue !=''
)
alert("Что-то есть!")
ava
GoodBoy | 27.10.2004, 15:29 #
Се ля ви
Да ты во многом прав!!! smile)))) Но, т. к. изначально был установлен флаг IE_ONLY, то я и выдал соответствующиё код...
smile)))))))))))))))))
ava
Се ля ви | 27.10.2004, 15:32 #
Цитата (GoodBoy @ 27.10.2004, 15:29)


изначально был установлен флаг IE_ONLY



Ну, я так... надо же пропогандировать кроссбраузерность! smile)) К тому же просто не обратил внимания <:~)
ava
GoodBoy | 27.10.2004, 15:35 #
Се ля ви
кстати, nodeValue это аналог чего??? (inner|outer)(Text|HTML)???
ava
Се ля ви | 27.10.2004, 15:45 #
Цитата (GoodBoy @ 27.10.2004, 15:35)


кстати, nodeValue это аналог чего??? (inner|outer)(Text|HTML)???



Ну, это DOM-модель. Внутри тега есть текст - значит это текстовый нод, родительским которому служит нод этого тега. Он сам по себе не равен своему внутреннему значению (потому что это просто нод, для которого справедливы все методы, как для остальных нодов, просто тип у этого нода - текстовый, или 3, поэтому для него не справедливы вссе методы, например, тегового нода - у него nodeType = 1), а доступиться к его содержимому (строке) можно через поле "nodeValue".

Это просто классическая ООП-модель smile
ava
ОлегDAD | 27.10.2004, 17:40 #
Большое спасибо за помощь. Пошел писать. Олег smile
ava
Sardar | 27.10.2004, 20:44 #
GoodBoy как то ты DOM с IE DOM смешал, получается "не вкусно"... :)

Не забываем что у таблиц есть свой удобный интерфейс: http://www.w3.org/TR/2000/WD-DOM-Level-1-2...tml#ID-64060425
IE расширяет свойства, например у таблицы есть коллекция cells, юзать которую не стоит ;-)

Пример с вариантом кода от GoodBoy
var TABLE_elem = document.getElementById("TAB");
var cInd = номер_нужного_столбца;
for (var i=0; i<TABLE_elem.rows.length; i++) {
   if (TABLE_elem.rows[i].cells[cInd].style.display == 'none')
       TABLE_elem.rows[i].cells[cInd].style.display = 'block';
   else
       TABLE_elem.rows[i].cells[cInd].style.display = 'none';
}
ava
GoodBoy | 28.10.2004, 10:06 #
Sardar
Гранд мерси за линк!!!! smile)))
Please register or login to write.
Firm of day
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Contributors
advanced
Submit