Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Живой поиск в таблице. Проблема смещения колонки (https://javascript.ru/forum/jquery/85003-zhivojj-poisk-v-tablice-problema-smeshheniya-kolonki.html)

thislegion 01.03.2023 18:38
Живой поиск в таблице. Проблема смещения колонки
 
Приветствую!

Помогите разобраться. Когда ищешь в левой колонке через "Поиск1", то правая колонка смещается в левую. Возможно ли сделать чтобы правая колонка не смещалась и запрос в левой колонке был вверху?

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Table</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">'
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">
<style>
.tablinks, .tablinks2 {font-size:12px;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif}
.tablinks:hover, .tablinks2:hover{cursor:pointer;color:white;background-color:black;}   
tr .tablinks {background-color: #C8C8C8}
.leftable{width:20%}
</style>
</head>
<body>
 <table id="mytable" class="leftable">
    <thead>
        <tr>
            <th>
                <div class="ui fluid icon input">
                <input type="text" id="search" placeholder="Поиск1">
                <i class="search icon"></i>
                </div> 
           </th>
            <th>
                <div class="ui fluid icon input">
                <input type="text" id="search-right" placeholder="Поиск2">
                <i class="search icon"></i>
                </div> 
           </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tablinks">Яблоко</td>
            <td class="tablinks2">Яблоко</td>
        </tr>
        <tr>
            <td  class="tablinks">Банан</td>
            <td  class="tablinks2">Банан</td>
        </tr>
        <tr>
            <td  class="tablinks">Апельсин</td>
            <td class="tablinks2">Апельсин</td>
        </tr>
        <tr>
            <td  class="tablinks">Киви</td>
            <td class="tablinks2">Киви</td>
        </tr>
        <tr>
            <td class="tablinks">Мандарин</td>
            <td class="tablinks2">Мандарин</td>
        </tr>
        <tr>
            <td class="tablinks">Арбуз</td>
            <td class="tablinks2">Арбуз</td>
        </tr>
        <tr>
            <td class="tablinks">Груша</td>
            <td class="tablinks2">Груша</td>
        </tr>
   </tbody>


<script>
        $(document).ready(function(){
            $("#search").keyup(function(){
                _this = this;
                $.each($("tr .tablinks"), function() {
                    if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1){
                        
                      $(this).hide();
     
                    } else {
                        
                     $(this).show();

                    }

                });

            });
  
        });
</script>


</table> 
</body>
</html>

рони 01.03.2023 23:44
поиск в таблице по левой колонке
 
Цитата:
Сообщение от thislegion
запрос в левой колонке был вверху?
так?
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Table</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">'
    <style>
        .tablinks,
        .tablinks2 {
            font-size: 12px;
            font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif
        }
        .tablinks:hover,
        .tablinks2:hover {
            cursor: pointer;
            color: white;
            background-color: black;
        }
        tr .tablinks {
            background-color: #C8C8C8
        }
        .leftable {
            width: 20%;
        }
    </style>
</head>
<body>
    <table id="mytable" class="leftable">
        <thead>
            <tr>
                <th>
                    <div class="ui fluid icon input">
                        <input type="text" id="search" placeholder="Поиск1">
                        <i class="search icon"></i>
                    </div>
                </th>
                <th>
                    <div class="ui fluid icon input">
                        <input type="text" id="search-right" placeholder="Поиск2">
                        <i class="search icon"></i>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="tablinks">Яблоко</td>
                <td class="tablinks2">Яблоко</td>
            </tr>
            <tr>
                <td class="tablinks">Банан</td>
                <td class="tablinks2">Банан</td>
            </tr>
            <tr>
                <td class="tablinks">Апельсин</td>
                <td class="tablinks2">Апельсин</td>
            </tr>
            <tr>
                <td class="tablinks">Киви</td>
                <td class="tablinks2">Киви</td>
            </tr>
            <tr>
                <td class="tablinks">Мандарин</td>
                <td class="tablinks2">Мандарин</td>
            </tr>
            <tr>
                <td class="tablinks">Арбуз</td>
                <td class="tablinks2">Арбуз</td>
            </tr>
            <tr>
                <td class="tablinks">Груша</td>
                <td class="tablinks2">Груша</td>
            </tr>
        </tbody>
    </table>
    <script>
        $(function() {
            let listTR = $("#mytable tbody tr");
            $("#search").keyup(function() {
                let val = this.value.toLowerCase();
                let arr = listTR.get().sort(function(a, b) {
                    a = a.querySelector('.tablinks').textContent.toLowerCase();
                    b = b.querySelector('.tablinks').textContent.toLowerCase();
                    a = a.indexOf(val);
                    b = b.indexOf(val);
                    if (b == -1 && a == -1) return 0;
                    if (b == -1) return -1;
                    if (a == -1) return 1;
                    return a - b;
                });
                $("#mytable tbody").append(arr);
            });
        });
    </script>
</body>
</html>

thislegion 02.03.2023 12:40
Цитата:
Сообщение от рони
запрос в левой колонке был вверху? так ?
Не совсем. Чтобы запрос был вверху, а ненужные в hide и при этом чтобы правая колонка не смещалась влево.

рони 02.03.2023 14:26
thislegion,
не понимаю.

рони 02.03.2023 15:00
thislegion,
скрывать всю строку или только ячейку?

thislegion 02.03.2023 18:15
Чтобы вот так было

рони 02.03.2023 18:35
thislegion,
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Table</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">'
    <style>
        .tablinks,
        .tablinks2 {
            font-size: 12px;
            font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif
        }
        .tablinks:hover,
        .tablinks2:hover {
            cursor: pointer;
            color: white;
            background-color: black;
        }
        tr .tablinks {
            background-color: #C8C8C8
        }
        .leftable {
            width: 20%;
        }
        td.tablinks.hide {
            opacity: 0;
        }
    </style>
</head>
<body>
    <table id="mytable" class="leftable">
        <thead>
            <tr>
                <th>
                    <div class="ui fluid icon input">
                        <input type="text" id="search" placeholder="Поиск1">
                        <i class="search icon"></i>
                    </div>
                </th>
                <th>
                    <div class="ui fluid icon input">
                        <input type="text" id="search-right" placeholder="Поиск2">
                        <i class="search icon"></i>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="tablinks">Яблоко</td>
                <td class="tablinks2">Яблоко</td>
            </tr>
            <tr>
                <td class="tablinks">Банан</td>
                <td class="tablinks2">Банан</td>
            </tr>
            <tr>
                <td class="tablinks">Апельсин</td>
                <td class="tablinks2">Апельсин</td>
            </tr>
            <tr>
                <td class="tablinks">Киви</td>
                <td class="tablinks2">Киви</td>
            </tr>
            <tr>
                <td class="tablinks">Мандарин</td>
                <td class="tablinks2">Мандарин</td>
            </tr>
            <tr>
                <td class="tablinks">Арбуз</td>
                <td class="tablinks2">Арбуз</td>
            </tr>
            <tr>
                <td class="tablinks">Груша</td>
                <td class="tablinks2">Груша</td>
            </tr>
        </tbody>
    </table>
    <script>
        $(function() {
            const listTd = $("#mytable tbody tr .tablinks").get();
            const collator = new Intl.Collator(["en", "ru"], {
                numeric: true
            });
            $("#search").keyup(function() {
                const val = this.value.toLowerCase().trim();
                const arrTd = listTd.slice(0).sort(function(a, b) {
                    const aTxt = a.textContent.toLowerCase();
                    const bTxt = b.textContent.toLowerCase();
                    const aI = aTxt.indexOf(val);
                    const bI = bTxt.indexOf(val);
                    a.classList.toggle('hide', aI == -1);
                    b.classList.toggle('hide', bI == -1);
                    if (!val) return 0;
                    if (aI == -1 && bI == -1) return collator.compare(aTxt, bTxt);
                    if (aI == -1) return 1;
                    if (bI == -1) return -1;
                    return aI - bI || collator.compare(aTxt, bTxt);
                });
                $("#mytable tbody tr").each(function(i, tr) {
                    tr.prepend(arrTd[i])
                })
            });
        });
    </script>
</body>
</html>

thislegion 02.03.2023 19:33
Похоже это то что нужно


Часовой пояс GMT +3, время: 03:07.