Динамическое сокрытие элементов таблицы
Имеем: таблицу, элементы <td> которой содержат некоторый текст.
Задача: при динамическом вводе пользователя в поле ввода текстовой строки динамически скрывать те элементы <td> таблицы, содержимое которых НЕ соответствует полю ввода. Тестовая страница с сценарием: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script language="JavaScript"> function sort_table() { var counter = 1; if (document.test_form.filter.value != '') { while (counter <= 6) { var node_td = document.getElementById('td_' + counter); if (node_td.innerHTML != document.test_form.filter.value) { var node_tr = document.getElementById('tr_' + counter); node_tr.style.visibility = "hidden"; } counter++; } } } </script> </head> <body> <table width="100%" border="1"> <tr id="tr_1"><td id="td_1">111</td></tr> <tr id="tr_2"><td id="td_2">222</td></tr> <tr id="tr_3"><td id="td_3">333</td></tr> <tr id="tr_4"><td id="td_4">444</td></tr> <tr id="tr_5"><td id="td_5">555</td></tr> <tr id="tr_6"><td id="td_6">123</td></tr> </table> <p> <form name="test_form" method="get" action="#"> <input name="filter" type="Text" onkeypress="sort_table();"> </form> </p> </body> </html> Не работает :-( |
А с чего бы ему работать. Когда пользователь начинает вводить значение, выполняется sort_table() и все ячейки, не соответствующие введённому значению (т.е. все) удаляются.
|
Таки да, не подумал.
Добавил в функцию по всем элементам ...visibility = "visible", действительно заработало, спасибо. Интересно, а как теперь сделать так, чтобы динамически удалять лишние строки из таблицы (при visibility = "hidden" остается пустое место) ? Вначале занести все элементы (вернее значения внутри <td>...</td>) в массив и затем отстраивать таблицу согласно него ? |
Удаляйте строку из DOM вообще:
node.parentNode.removeChild(node); |
Да, но тогда для ее восстановления потребуется перезагрузка документа.
А нужно, чтобы происходила фильтрация строк на основе введенных пользователем данных. Если в поле фильтра ничего нет (пустая строка или пробел) - должны отображаться все строки таблицы, а если что-то введено и текст совпадает с текстом в строках - чтобы отображались соотв. строки. |
ну тогда добавьте что-нибудь типа
node_tr.style.position = "absolute"; И лучше обрабатывать не onkeypress, a onkeyup. |
display: none уже не рулит?<table border="1"> <tr><td>1-1</td><td>1-2</td></tr> <tr style="display: none"><td>2-1</td><td>2-2</td></tr> <tr><td>3-1</td><td>3-2</td></tr> </table> |
Сделал на массиве...
Но так конечно красивее да и Дэвид Флэнган тоже так рекомендует :-) Но вот такой код не работает :-( <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script language="JavaScript"> function sort_table() { var counter = 1; if (document.test_form.filter.value != '') { while (counter <= 6) { var element = document.getElementById('td_' + counter); if (element.innerHTML != document.test_form.filter.value) element.parentNode.style.display = 'none'; counter++; } } } </script> </head> <body> <table id ="test_table" width="100%" border="1"> <tr id="tr_1"><td id="td_1">111</td></tr> <tr id="tr_2"><td id="td_2">222</td></tr> <tr id="tr_3"><td id="td_3">333</td></tr> <tr id="tr_4"><td id="td_4">444</td></tr> <tr id="tr_5"><td id="td_5">555</td></tr> <tr id="tr_6"><td id="td_6">123</td></tr> </table> <p> <form name="test_form" method="get" action="#"> <input name="filter" type="Text" onkeyup="sort_table()" value=""> </form> </p> </body> </html> |
Понял свою ошибку.
Вот листинг работающего примера (с исп. RegExp): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <script language="JavaScript"> function sort_table() { var pattern_string = ''; var counter = 1; if (document.test_form.filter.value != '') pattern_string = '^' + document.test_form.filter.value; while (counter <= 6) { var element = document.getElementById('td_' + counter); if ( (element.innerHTML.search(pattern_string) != -1) || (document.test_form.filter.value == '') ) element.parentNode.style.display = ''; else element.parentNode.style.display = 'none'; counter++; } } </script> </head> <body> <table id ="test_table" width="100%" border="1"> <tr id="tr_1"><td id="td_1">111</td></tr> <tr id="tr_2"><td id="td_2">222</td></tr> <tr id="tr_3"><td id="td_3">333</td></tr> <tr id="tr_4"><td id="td_4">444</td></tr> <tr id="tr_5"><td id="td_5">555</td></tr> <tr id="tr_6"><td id="td_6">123</td></tr> </table> <p> <form name="test_form" method="get" action="#"> <input name="filter" type="Text" onkeyup="sort_table()" value=""> </form> </p> </body> </html> |
Часовой пояс GMT +3, время: 18:56. |