destus,
не могли бы Вы мне объяснить почему, после того, как я убираю "return true" поиск становится точнее? |
santey12,
потому что return прерывает дальнейшее выполнение функции. Нашли первое совпадение => return true => выход из функции, хотя совпадения ещё были. Если функция из себя ничего интересного не представляет, и не должна возвращать какое-то выражение, можно вообще return не использовать. Пусть она возвращает undefined. |
destus, еще хотел спросить, для сортировки лучше использовать новую функцию или продолжить работу с моей?
|
Поиск по строкам таблицы
santey12,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
tbody tr.search {
background-color: paleturquoise;
}
</style>
<title></title>
<script>
window.onload = function() {
function b(d) {
var b = 1;
[].forEach.call(e, function(a) {
a.classList.remove("search");
[].some.call(a.querySelectorAll("td"), function(a) {
var b = a.querySelector("select");
return b ? ~b.value.indexOf(d) : ~a.innerHTML.indexOf(d)
}) ? (d && a.classList.add("search"), c.insertBefore(a, tbl.rows[b++])) : c.appendChild(a)
})
}
var c = document.querySelector("#tbl tbody"),
e = c.querySelectorAll("tr");
btn.onclick = function() {
b(srch.value)
}
};
</script>
</head>
<body>
<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>
</body>
</html>
|
santey12,
Мне кажется что в этой же будет оптимальнее. |
рони, не совсем понимаю, как происходит выделение найденных строк?
|
santey12,
если в одной из ячеек строки есть совпадение по тексту или в селекторе и значение поиска существует, присваивается класс - строка 23 -- есть совпадение или нет вычислят строки 20 - 23 |
Если в поиске задать "2", то он выделит всю таблицу, т.к поле "дата" начинается с "2".
|
santey12,
и чего? Цитата:
|
santey12,
или используйте регу для точного совпадения |
| Часовой пояс GMT +3, время: 13:21. |