Показать сообщение отдельно
  #4 (permalink)  
Старый 08.03.2016, 12:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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>
Ответить с цитированием