Поиск по таблице
Всем, доброго времени суток!
Возникли трудности при поиске в таблице:
<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,
если несколько строк совпадают с поиском, которая будет выше? |
Та строка, которая стоит первой в таблице.
|
santey12,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.search tbody tr:nth-child(1) {
background-color: paleturquoise;
}
</style>
<title></title>
<script>
window.onload = function() {
function search(searchWord) { //создание функции
tbl.classList.remove("search");
if(!searchWord) return;
for (var i = 1, l = tbl.rows.length; i < l; i++) { //перебор столбцов по длинне
for (var j = 0, l1 = tbl.rows[i].cells.length - 1; j < l1; j++) { //перебор ячеек
if (~tbl.rows[i].cells[j].innerHTML.indexOf(searchWord) || ~tbl.rows[i].querySelector('select').value.indexOf(searchWord)) { //если длинна??? и ячейки совпадают, то перемещаем строку на первую позицию
tbl.rows[1].parentNode.insertBefore(tbl.rows[i], tbl.rows[1]);
tbl.classList.add("search")
return true;
}
}
}
}
btn.onclick = function() { //присваиваем кнопке функцию
search(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>
|
рони,
Не совсем понял, чем Ваш пример лучше моего? |
Друзья, не пишите слово "длина" с двумя буквами "н"! Сюда же и дети ходят!
|
Cuntmann,
Прошу прощения, но лучше бы Вы по делу написали;) |
santey12,
return true в вашей функции уберите и будет вам счастье. Осталось только одинаковые строки отсортировать. |
Это и есть по делу!
|
понятно нужна обычная сортировка строк с выделением при совпадении в поиске ... осталось только дождаться когда ТС придумает приоритеты сортировки
|
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,
или используйте регу для точного совпадения |
рони, дык в этом у меня и есть проблема, а то что предложили Вы это, конечно хорошо, но какой смысл, если у меня работает практически так же?
|
Цитата:
|
santey12,
строка 29 здесь http://javascript.ru/forum/css-html/...tml#post372707 |
Точный поиск по строкам таблицы
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"), r = new RegExp("^" +d+"$", "ig");
return b ? r.test(b.value) : r.test(a.innerHTML)
}) ? (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>
|
рони, а нельзя сделать выделение через ".style.backgroundColor", что бы при выполнении повторного поиска, результаты прошлого запроса теряли свое выделение. У меня это было реализовано, с помощью:
tbl.rows[1].style.backgroundColor = 'paleturquoise'; tbl.rows[2].style.backgroundColor = 'white'; Но это не эффективно при выделение двух одинаковых строк |
Цитата:
|
рони, в Вашем коде, мне что-то сложно разобраться, поэтому хотел через ".style.backgroundColor"
|
santey12,
понятно, увы помочь более не могу, рекомендую обратится к destus |
santey12,
Через documentFragment ваш скрипт переделал. Протестируйте и напишите результат.
<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>
<script>
function search(searchWord) { //создание функции
var fragment = document.createDocumentFragment(),
deleteArr = [];
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);
deleteArr.push(i);
fragment.appendChild(clone);
}
}
tbl.rows[i].style.backgroundColor = 'white';
}
if (fragment.childNodes.length != 0) {
for (var i = 1, l = tbl.rows.length; i < l; i++) {
if (deleteArr.indexOf(i) == -1) {
var clone = tbl.rows[i].cloneNode(true);
fragment.appendChild(clone);
}
}
i = tbl.rows.length;
while (i-- > 1) {
tbl.rows[i].parentNode.removeChild(tbl.rows[i]);
}
tbl.appendChild(fragment);
tbl.rows[1].style.backgroundColor = 'paleturquoise'; //изменяем первой/найденной ячейки
}
}
btn.onclick = function () { //присваиваем кнопке функцию
search(srch.value)
}
</script>
|
destus,
что-то совсем плохо работает... Клонирует ячейки... |
santey12,
а так?
<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>
<script>
function search(searchWord) { //создание функции
var idx = 0;
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) { //если длина и ячейки совпадают, то перемещаем строку на первую позицию
idx++;
var clone = tbl.rows[i].cloneNode(true);
tbl.rows[i].parentNode.removeChild(tbl.rows[i]);
tbl.rows[1].parentNode.insertBefore(clone, tbl.rows[idx]);
tbl.rows[1].style.backgroundColor = 'paleturquoise'; //изменяем первой/найденной ячейки
tbl.rows[2].style.backgroundColor = 'white'; //изменяем цвет второй ячейки
}
}
}
}
btn.onclick = function () { //присваиваем кнопке функцию
search(srch.value)
}
</script>
|
Тdestus, так работает! В чем была проблема?
П.С. Так же как и у Рони, при поиске "2" он ищет все элементы в таблице содержащие двойку, с помощью RegExp у меня не получилось реализовать... |
destus, работает, но не совсем верно, т.к он выделяет первую строку, а вторую закрашивает, поэтому если искать две одинаковые строки, то получается не совсем верно, у меня было так сделано в начале...
|
Цитата:
<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>
<script>
function search(searchWord) { //создание функции
var idx = 0;
for (var i = 1, l = tbl.rows.length; i < l; i++) { //перебор столбцов по длине
tbl.rows[i].style.backgroundColor = 'white';
for (var j = 0, l1 = tbl.rows[i].cells.length; j < l1; j++) { //перебор ячеек
if (tbl.rows[i].cells[j].innerHTML.indexOf(searchWord) + 1) { //если длина и ячейки совпадают, то перемещаем строку на первую позицию
idx++;
var clone = tbl.rows[i].cloneNode(true);
tbl.rows[i].parentNode.removeChild(tbl.rows[i]);
clone.style.backgroundColor = 'paleturquoise'; //изменяем первой/найденной ячейки
tbl.rows[1].parentNode.insertBefore(clone, tbl.rows[idx]);
}
}
}
}
btn.onclick = function () { //присваиваем кнопке функцию
search(srch.value)
}
</script>
Цитата:
|
destus, согласен, потому что у меня не получилось отсортировать, как я писал ранее я пытался с помощью RegExp, но не вышло. Вот так лучше. Можете закомментировать?
function search(searchWord) { //создание функции
var idx = 0;
for (var i = 1, l = tbl.rows.length; i < l; i++) { //перебор столбцов по длине
tbl.rows[i].style.backgroundColor = 'white';
for (var j = 0, l1 = tbl.rows[i].cells.length; j < l1; j++) { //перебор ячеек
if (tbl.rows[i].cells[j].innerHTML.indexOf(searchWord) + 1) { //если длина и ячейки совпадают, то перемещаем строку на первую позицию
idx++;
var clone = tbl.rows[i].cloneNode(true);
tbl.rows[i].parentNode.removeChild(tbl.rows[i]);
clone.style.backgroundColor = 'paleturquoise'; //изменяем первой/найденной ячейки
tbl.rows[1].parentNode.insertBefore(clone, tbl.rows[idx]);
}
}
}
}
btn.onclick = function () { //присваиваем кнопке функцию
search(srch.value)
}
|
Вообще основная проблема была не с подсветкой найденных строк, а как раз с тем, что при поиске у меня не получалось найти конкретное число и не получалось реализовать поиск по <select>:D
|
function search(searchWord) { //создание функции
var idx = 0; //индекс (указывает место куда вставлять очередное совпадение)
for (var i = 1, l = tbl.rows.length; i < l; i++) { //перебор столбцов по длине
tbl.rows[i].style.backgroundColor = 'white'; //всем строкам белый цвет
for (var j = 0, l1 = tbl.rows[i].cells.length; j < l1; j++) { //перебор ячеек
if (tbl.rows[i].cells[j].innerHTML.indexOf(searchWord) + 1) { //если длина и ячейки совпадают, то перемещаем строку после idx
idx++;
var clone = tbl.rows[i].cloneNode(true);
tbl.rows[i].parentNode.removeChild(tbl.rows[i]);
clone.style.backgroundColor = 'paleturquoise'; //найденной строке цвет paleturquoise
tbl.rows[1].parentNode.insertBefore(clone, tbl.rows[idx]); //чтобы найденные строки шли в той же последовательности, что и в изначальной таблице
}
}
}
}
|
| Часовой пояс GMT +3, время: 04:00. |