Форум

kos0760 · #1 (**permalink**) 20.02.2019, 22:58

Здравствуйте!

Есть таблица в которой есть, например, две колонки "Номер" и "Цвет".

Задача скрыть колонку "Цвет", если все значения в ней равны "-" (Таблица 1). Т.е. скрыть ячейки с классами color-title и color-val.

Если хотя бы в одной из них будет значение отличное от "-" (Таблица 2), то оставить все как есть.

Заранее спасибо за помощь.

рони · #2 (**permalink**) 21.02.2019, 09:13

kos0760,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
   window.addEventListener('DOMContentLoaded', () => {
   const table = document.querySelectorAll('table');
   const test = (arr, str) => arr.some(td => td.textContent != str);
   table.forEach(tbl => {
      let td = [...tbl.querySelectorAll('.color-val')];
      const show = test(td, '-');
      if(show) return;
      td.push(tbl.querySelector('.color-title'));
      td.forEach(el => el.classList.add("collapse"))
   });
     })
</script>

</head>
<body>
    <div class="row">
        <div class="col">
            <div class="h4 text-center">Таблица 1</div>
            <table class="table table-bordered">
                <thead>
                    <td>Номер</td>
                    <td class="color-title">Цвет</td>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td class="color-val">-</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td class="color-val">-</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td class="color-val">-</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col">
                <div class="h4 text-center">Таблица 2</div>
                <table class="table table-bordered">
                    <thead>
                        <td>Номер</td>
                        <td class="color-title">Цвет</td>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td class="color-val">-</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td class="color-val">Синий</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td class="color-val">-</td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </div>
</body>
</html>

kos0760 · #3 (**permalink**) 21.02.2019, 11:43

Спасибо, рони! Все работает, только есть один момент. Я заметил, что там, где в таблице есть только одна строка со значением "-", в консоли вот эта ошибка:

Uncaught TypeError: Cannot read property 'classList' of null
    at td.forEach.el (klejk.-lenta-prozrachnaya-33-m-h-12-mm:772)
    at Array.forEach (<anonymous>)
    at table.forEach.tbl (klejk.-lenta-prozrachnaya-33-m-h-12-mm:772)
    at NodeList.forEach (<anonymous>)
    at window.addEventListener (klejk.-lenta-prozrachnaya-33-m-h-12-mm:767)

Как ее избежать?

И еще одна просьба. Для меня, в принципе это не критично, но может подскажете, что делать. Из-за того, что скрипт выполняется после загрузки всего документа, в таблице, то, что должно скрыться, на доли секунды появляется, а затем, как и нужно, пропадает. Не подскажете, как ускорить обработку таблицы скриптом?

Спасибо!

рони · #4 (**permalink**) 21.02.2019, 12:04

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

как ускорить обработку таблицы скриптом?

никак, возможно есть способ, не знаю такого, но можно скрыть таблицы и показать после обработки.

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

где в таблице есть только одна строка со значением "-"

пример таблицы (минимальный) ?

Nexus · #5 (**permalink**) 21.02.2019, 12:05

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

в консоли вот эта ошибка

строку 16 в коде рони замените этим:

td.forEach(el => el && el.classList.add("collapse"));

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

Не подскажете, как ускорить обработку таблицы скриптом?

Вставьте скрипт сразу после таблицы и вытащите его из слушателя события DOMContentLoaded.

рони · #6 (**permalink**) 21.02.2019, 12:14

kos0760,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style type="text/css">
    table {
         display: none;
    }
    table.open{
         display:  table;
    }

    </style>
<script>
   window.addEventListener('DOMContentLoaded', () => {
   const table = document.querySelectorAll('table');
   const test = (arr, str) => arr.every(td => td.textContent == str);
   table.forEach(tbl => {
      let td = [...tbl.querySelectorAll('.color-val')];
      const hide = test(td, '-');
      if(hide){
      let title = tbl.querySelector('.color-title')
      title && td.push(title);
      td.forEach(el => el.classList.add("collapse"))
      };
      tbl.classList.add("open")
   });
     })
</script>

</head>
<body>
    <div class="row">
        <div class="col">
            <div class="h4 text-center">Таблица 1</div>
            <table class="table table-bordered">
                <thead>
                    <td>Номер</td>
                    <td class="color-title">Цвет</td>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td class="color-val">-</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td class="color-val">-</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td class="color-val">-</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="col">
                <div class="h4 text-center">Таблица 2</div>
                <table class="table table-bordered">
                    <thead>
                        <td>Номер</td>
                        <td class="color-title">Цвет</td>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td class="color-val">-</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td class="color-val">Синий</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td class="color-val">-</td>
                        </tr>
                    </tbody>
                </table>
        </div>
        <div class="col">
                <div class="h4 text-center">Таблица 3</div>
                <table class="table table-bordered">
                   <tbody>
                        <tr>
                            <td>1</td>
                            <td class="color-val">-</td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </div>
</body>
</html>

kos0760 · #7 (**permalink**) 21.02.2019, 12:24

рони,
Nexus,
большое спасибо за помощь! Вопросы закрыты. Скрипт срабатывает моментально и без ошибок!

Пока писал свое сообщение, смотрю рони еще предложил вариант, но я уже воспользовался решением от Nexus

Nexus · #8 (**permalink**) 21.02.2019, 12:42

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

я уже воспользовался решением от Nexus

Справедливости ради стоит отметить, это было решение рони, не мое.

kos0760 · #9 (**permalink**) 21.02.2019, 12:59

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

Справедливости ради стоит отметить, это было решение рони, не мое.

Да, конечно, я понимаю.

Форум

Справочник

Discord чат

Курсы javascript