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

Поиск по строкам таблицы
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>
Ответить с цитированием