Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2019, 22:58
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

Вопрос по элементам таблицы
Здравствуйте!

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

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

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

Заранее спасибо за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2019, 09:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,531

скрытие колонки таблицы
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>
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2019, 11:43
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

Спасибо, рони! Все работает, только есть один момент. Я заметил, что там, где в таблице есть только одна строка со значением "-", в консоли вот эта ошибка:
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,531

Сообщение от kos0760
как ускорить обработку таблицы скриптом?
никак, возможно есть способ, не знаю такого, но можно скрыть таблицы и показать после обработки.
Сообщение от kos0760
где в таблице есть только одна строка со значением "-"
пример таблицы (минимальный) ?
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2019, 12:05
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,857

Сообщение от kos0760
в консоли вот эта ошибка
строку 16 в коде рони замените этим:
td.forEach(el => el && el.classList.add("collapse"));

Сообщение от kos0760
Не подскажете, как ускорить обработку таблицы скриптом?
Вставьте скрипт сразу после таблицы и вытащите его из слушателя события DOMContentLoaded.
Ответить с цитированием
  #6 (permalink)  
Старый 21.02.2019, 12:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,531

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>

Последний раз редактировалось рони, 21.02.2019 в 12:18.
Ответить с цитированием
  #7 (permalink)  
Старый 21.02.2019, 12:24
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

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

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

Последний раз редактировалось kos0760, 21.02.2019 в 12:38.
Ответить с цитированием
  #8 (permalink)  
Старый 21.02.2019, 12:42
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,857

Сообщение от kos0760
я уже воспользовался решением от Nexus
Справедливости ради стоит отметить, это было решение рони, не мое.
Ответить с цитированием
  #9 (permalink)  
Старый 21.02.2019, 12:59
Аспирант
Отправить личное сообщение для kos0760 Посмотреть профиль Найти все сообщения от kos0760
 
Регистрация: 03.05.2015
Сообщений: 39

Сообщение от Nexus Посмотреть сообщение
Справедливости ради стоит отметить, это было решение рони, не мое.
Да, конечно, я понимаю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как исправить дерганья липкой шапки таблицы на мобильных? crabosse0 Элементы интерфейса 0 28.05.2018 19:28
объединение четырёх таблиц DivMan Серверные языки и технологии 1 31.12.2017 20:27
почему не обрабатываются события в динамически добавленых строках таблицы boris2000 Events/DOM/Window 2 10.11.2016 14:04
Как передать данные в другую панель из выбранной строки таблицы. layout: 'card'. Пролетарий ExtJS 5 03.06.2015 23:53
Сохранение таблицы с сайта и отправка на email martinss Events/DOM/Window 5 29.12.2010 12:39