Форум

IndigoHollow · #1 (**permalink**) 14.08.2014, 21:42

Есть html таблица. Хочу, что бы по нажатию кнопки отображались только те строки, слова в которых начинаются на букву "а". Пробовал сделать, но почему-то не выходит. В чем ошибка?

<table id="sf">
        <tr>
            <td>Бочка</td>
        </tr>
        <tr>
            <td>Аквариум</td>
        </tr>
		<tr>
            <td>Астронавт</td>
        </tr>
		<tr>
            <td>Лопата</td>
        </tr>
		<tr>
            <td>Аргентина</td>
        </tr>
</table>

<input name="filt1" onclick="filtera('sf')" type="button" id="filt1" />

function filtera (_id1){
        var table1 = document.getElementById(_id1);
        var ele1;
        for (var r = 1; r < table1.rows.length; r++) {
            ele1 = table1.rows[r].innerHTML.replace(/<[^>]+>/g,"");
                var displayStyle = 'none';
				if (ele1.toLowerCase().charAt(0) == 'а')
					displayStyle = '';
                else {
					displayStyle = 'none';
					break;
                }
            table1.rows[r].style.display = displayStyle;
        }
    }

рони · #2 (**permalink**) 14.08.2014, 22:06

IndigoHollow,
11 строка зачем?

рони · #3 (**permalink**) 14.08.2014, 22:16

IndigoHollow,

<!DOCTYPE HTML>

<html>

<head><meta charset="utf-8">
  <title>Untitled</title>
</head>

<body>    <table id="sf">
        <tr>
            <td>Бочка</td>
        </tr>
        <tr>
            <td>Аквариум</td>
        </tr>
		<tr>
            <td>Астронавт</td>
        </tr>
		<tr>
            <td>Лопата</td>
        </tr>
		<tr>
            <td>Аргентина</td>
        </tr>
</table>

<input name="filt1" onclick="filtera('sf')" type="button" id="filt1" />
 <script>
    function filtera (_id1){
        var table1 = document.getElementById(_id1);
        var ele1;
        for (var r = 1; r < table1.rows.length; r++) {
            ele1 = table1.rows[r].innerHTML.replace(/<[^>]+>|\s/g,"");
                var displayStyle = 'none';
				if (ele1.toLowerCase().charAt(0) == 'а') displayStyle = '';
            table1.rows[r].style.display = displayStyle;
        }
    }

 </script>
</body>
</html>

IndigoHollow · #4 (**permalink**) 14.08.2014, 22:18

Сообщение от рони

IndigoHollow,
11 строка зачем?

Ошибочка вышла

Когда строку убрал, то таблица скрывает все строки. Даже те, которые удовлетворяют условию.

Во, спасибо! Сейчас пойду пробовать

IndigoHollow · #5 (**permalink**) 14.08.2014, 22:45

А если, скажем, в таблице две колонки и надо отфильтровать по второй?
Вот я накидал код:

<table id="sf" border="1">
        <tr>
            <td>1</td>
			<td>Лопата</td>
        </tr>
        <tr>
            <td>2</td>
			<td>Кран</td>
        </tr>
		<tr>
            <td>3</td>
			<td>Качели</td>
        </tr>
		<tr>
            <td>4</td>
			<td>Прицеп</td>
        </tr>
		<tr>
            <td>5</td>
			<td>Солнце</td>
        </tr>
</table>

<input name="filt1" onclick="filtera('sf')" type="button" id="filt1" />

function filtera (_id1){
        var table1 = document.getElementById(_id1);
        var ele1;
        for (var r = 0; r < table1.rows.length; r++) {
			for (var q = 0; q < table1.rows[r].cells.length; q++) {
				ele1 = table1.rows[r].cells[q].innerHTML.replace(/<[^>]+>|\s/g,"");
					var displayStyle = 'none';
					if (ele1.toLowerCase().charAt(0) == 'к') displayStyle = '';
				table1.rows[r].cells[q].style.display = displayStyle;
			}
        }
    }

Только есть одно НО. Результат показывает только вторую колонку, а первую просто вырезает. Как исправить?
Если бы я знал как вставлять рабочий код в пост, то вставил бы. А пока я не узнал, прикрепляю картинку

IndigoHollow · #6 (**permalink**) 14.08.2014, 22:50

Получилось

function filtera (_id1){
        var table1 = document.getElementById(_id1);
        var ele1;
        for (var r = 0; r < table1.rows.length; r++) {
			for (var q = 0; q < table1.rows[r].cells.length; q++) {
				ele1 = table1.rows[r].cells[q].innerHTML.replace(/<[^>]+>|\s/g,"");
					var displayStyle = 'none';
					if (ele1.toLowerCase().charAt(0) == 'к') displayStyle = '';
				/*table1.rows[r].cells[q].style.display = displayStyle;*/
			}
			table1.rows[r].style.display = displayStyle;
        }
    }

Спасибо, рони!

рони · #7 (**permalink**) 14.08.2014, 22:53

Сообщение от IndigoHollow

Если бы я знал как вставлять рабочий код в пост

[HTML  run][/HTML]

Сообщение от IndigoHollow

надо отфильтровать по второй

а зачем тогда второй цикл??
пост 3 добавьте ячейку в строку 33 и всё

рони · #8 (**permalink**) 14.08.2014, 22:54

IndigoHollow,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

IndigoHollow · #9 (**permalink**) 14.08.2014, 23:18

Сообщение от рони

а зачем тогда второй цикл??
пост 3 добавьте ячейку в строку 33 и всё

Странно, что с маленькой таблице работает хорошо, а с большой (2500 строк) работать не хочет. При ниженаписанном коде нажатие на кнопку вообще реакции никакой не дает:

<script>
    function filtera (_id1){
        var table1 = document.getElementById(_id1);
        var ele1;
        for (var r = 1; r < table1.rows.length; r++) {
            ele1 = table1.rows[r].cells[1].innerHTML.replace(/<[^>]+>|\s/g,"");
                var displayStyle = 'none';
                if (ele1.toLowerCase().charAt(0) == 'а') displayStyle = '';
            table1.rows[r].style.display = displayStyle;
        }
    }
 
 </script>

Сообщение от рони

Пожалуйста, отформатируйте свой код!

Так я ж форматировал. Для html-кода я нажал в редакторе кнопку "Вставить тег [html] вокруг выделенного текста", а для js-кода пользовался специальной кнопкой Javascript.

рони · #10 (**permalink**) 14.08.2014, 23:26

Сообщение от IndigoHollow

Так я ж форматировал

это стандартное сообщение было из - Добавить RTFM -

Форум

Справочник

Discord чат

Курсы javascript