Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.08.2014, 21:42
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

Фильтрация строк таблицы по первой букве
Есть 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

IndigoHollow,
11 строка зачем?
Ответить с цитированием
  #3 (permalink)  
Старый 14.08.2014, 22:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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>
Ответить с цитированием
  #4 (permalink)  
Старый 14.08.2014, 22:18
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

Сообщение от рони Посмотреть сообщение
IndigoHollow,
11 строка зачем?
Ошибочка вышла
Когда строку убрал, то таблица скрывает все строки. Даже те, которые удовлетворяют условию.

Во, спасибо! Сейчас пойду пробовать
Ответить с цитированием
  #5 (permalink)  
Старый 14.08.2014, 22:45
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

А если, скажем, в таблице две колонки и надо отфильтровать по второй?
Вот я накидал код:
<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;
			}
        }
    }


Только есть одно НО. Результат показывает только вторую колонку, а первую просто вырезает. Как исправить?
Если бы я знал как вставлять рабочий код в пост, то вставил бы. А пока я не узнал, прикрепляю картинку
Ответить с цитированием
  #6 (permalink)  
Старый 14.08.2014, 22:50
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 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;
        }
    }


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

Последний раз редактировалось IndigoHollow, 14.08.2014 в 23:08.
Ответить с цитированием
  #7 (permalink)  
Старый 14.08.2014, 22:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от IndigoHollow
Если бы я знал как вставлять рабочий код в пост
[HTML  run][/HTML]

Сообщение от IndigoHollow
надо отфильтровать по второй
а зачем тогда второй цикл??
пост 3 добавьте ячейку в строку 33 и всё
Ответить с цитированием
  #8 (permalink)  
Старый 14.08.2014, 22:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #9 (permalink)  
Старый 14.08.2014, 23:18
Аватар для IndigoHollow
Аспирант
Отправить личное сообщение для IndigoHollow Посмотреть профиль Найти все сообщения от IndigoHollow
 
Регистрация: 02.04.2012
Сообщений: 50

Сообщение от рони Посмотреть сообщение
а зачем тогда второй цикл??
пост 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от IndigoHollow
Так я ж форматировал
это стандартное сообщение было из - Добавить RTFM -
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
фильтрация .csv таблицы br1ck Элементы интерфейса 0 13.11.2013 08:35
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Фильтрация таблицы Tmin10 jQuery 1 06.09.2012 12:16
Изменение окраски строк таблицы, исходя из данных? Space-06 Events/DOM/Window 4 14.02.2012 21:32
Перемещение строк таблицы в Firefox barcelona jQuery 17 23.02.2009 15:41