Поиск по таблице

[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>

[santey12]

Тdestus, так работает! В чем была проблема?
П.С. Так же как и у Рони, при поиске "2" он ищет все элементы в таблице содержащие двойку, с помощью RegExp у меня не получилось реализовать...

[santey12]

destus, работает, но не совсем верно, т.к он выделяет первую строку, а вторую закрашивает, поэтому если искать две одинаковые строки, то получается не совсем верно, у меня было так сделано в начале...

[destus]

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>

П.С. Так же как и у Рони, при поиске "2" он ищет все элементы в таблице содержащие двойку

Это вы сами задали такое условие совпадения для ячеек. Не мы же его придумали.

[santey12]

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)
        }

[santey12]

Вообще основная проблема была не с подсветкой найденных строк, а как раз с тем, что при поиске у меня не получалось найти конкретное число и не получалось реализовать поиск по <select>

[destus]

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]); //чтобы найденные строки шли в той же последовательности, что и в изначальной таблице
                    }
                }
            }

        }