Показать сообщение отдельно
  #1 (permalink)  
Старый 08.03.2016, 11:16
Интересующийся
Отправить личное сообщение для santey12 Посмотреть профиль Найти все сообщения от santey12
 
Регистрация: 27.02.2016
Сообщений: 18

Поиск по таблице
Всем, доброго времени суток!
Возникли трудности при поиске в таблице:
  1. Не получается организовать поиск по <select>-ам
  2. Перемещение нескольких одинаковых строк.
<p align="middle"><input id="srch" type="text" class="srch" value="Введите текст для поиска" onfocus="this.value=''"><button id="btn" class="button">Поиск</button></p>
<script src="js/tbl.js"></script>
<table id="tbl" border="1" >
<thead>
<tr><th>Номер строки</th><th>Марка</th><th>Тип кузова</th><th>Дата</th><th>Количество</th><th>Статус</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Хендай</td><td>универсал</td><td value="2016-01-01">2016-01-01</td><td>11</td><td><select><option value="Open">Open</option><option value="In progress">In progress</option><option selected value="Resolved">Resolved</option></select></td></tr>
<tr><td>2</td><td>Тойта</td><td>седан</td><td value="2016-02-01">2016-02-01</td><td>10</td><td><select><option selected value="Open">Open</option><option value="In progress">In progress</option><option value="Resolved">Resolved</option></select></td></tr>
<tr><td>3</td><td>Лада</td><td>седан</td><td value="2016-03-01">2016-03-01</td><td>300</td><td><select><option selected value="Open">Open</option><option value="In progress">In progress</option><option value="Resolved">Resolved</option></select></td></tr>
<tr><td>4</td><td>Форд</td><td>хэтчбек</td><td value="2016-04-01">2016-04-01</td><td>120</td><td><select><option value="Open">Open</option><option selected value="In progress">In progress</option><option value="Resolved">Resolved</option></select></td></tr>
<tr><td>5</td><td>Шкода</td><td>лифтбэк</td><td value="2016-05-01">2016-05-01</td><td>99</td><td><select><option value="Open">Open</option><option value="In progress">In progress</option><option selected value="Resolved">Resolved</option></select></td></tr>
</tbody>
</table>

function search(searchWord){ //создание функции 
	for(var i = 1, l = tbl.rows.length; i < l; i++){ //перебор столбцов по длине 
		for(var j = 0, l1 = tbl.rows[i].cells.length; j < l1; j++){ //перебор ячеек 
			if(tbl.rows[i].cells[j].innerHTML.indexOf(searchWord) +1){ //если длина и ячейки совпадают, то перемещаем строку на первую позицию  
				var clone = tbl.rows[i].cloneNode(true);
				tbl.rows[i].parentNode.removeChild(tbl.rows[i]);
				tbl.rows[1].parentNode.insertBefore(clone, tbl.rows[1]);
				tbl.rows[1].style.backgroundColor = 'paleturquoise'; //изменяем первой/найденной ячейки 
				tbl.rows[2].style.backgroundColor = 'white'; //изменяем цвет второй ячейки 
				return true;
			}
		}
	}
}

btn.onclick = function(){ //присваиваем кнопке функцию 
	search(srch.value)
}

Так же можно посмотреть на http://jsfiddle.net/rhLv99nz/9/

Последний раз редактировалось santey12, 08.03.2016 в 13:15. Причина: опечатка
Ответить с цитированием