Форум

santey12 · #21 (**permalink**) 08.03.2016, 15:57

рони, дык в этом у меня и есть проблема, а то что предложили Вы это, конечно хорошо, но какой смысл, если у меня работает практически так же?

santey12 · #22 (**permalink**) 08.03.2016, 15:59

Сообщение от рони

santey12,
или используйте регу для точного совпадения

Можно по подробней?

рони · #23 (**permalink**) 08.03.2016, 16:16

santey12,
строка 29 здесь html select быстрый выбор

рони · #24 (**permalink**) 08.03.2016, 16:25

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>

santey12 · #25 (**permalink**) 08.03.2016, 16:26

рони, а нельзя сделать выделение через ".style.backgroundColor", что бы при выполнении повторного поиска, результаты прошлого запроса теряли свое выделение. У меня это было реализовано, с помощью:

tbl.rows[1].style.backgroundColor = 'paleturquoise';
tbl.rows[2].style.backgroundColor = 'white';

Но это не эффективно при выделение двух одинаковых строк

рони · #26 (**permalink**) 08.03.2016, 16:42

Сообщение от santey12

результаты прошлого запроса теряли свое выделение.

так они и теряют ... что не так?

santey12 · #27 (**permalink**) 08.03.2016, 17:01

рони, в Вашем коде, мне что-то сложно разобраться, поэтому хотел через ".style.backgroundColor"

рони · #28 (**permalink**) 08.03.2016, 17:05

santey12,
понятно, увы помочь более не могу, рекомендую обратится к destus

destus · #29 (**permalink**) 08.03.2016, 18:16

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>

santey12 · #30 (**permalink**) 08.03.2016, 18:21

destus,
что-то совсем плохо работает... Клонирует ячейки...

Форум

Справочник

Discord чат

Курсы javascript