Динамическое сокрытие элементов таблицы
Имеем: таблицу, элементы <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. |
Цитата:
Тогда нужно будет для каждой <tr> высчитывать ее положение относительно окна браузера, что не есть гуд, т.к. в моем случае вся таблица будет сидеть вв <div> с фиксированными размерами для обеспечения строки прокрутки справа. Вот что есть сейчас:  |
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, время: 16:39. |