Вопрос по элементам таблицы
Здравствуйте!
Есть таблица в которой есть, например, две колонки "Номер" и "Цвет". Задача скрыть колонку "Цвет", если все значения в ней равны "-" (Таблица 1). Т.е. скрыть ячейки с классами color-title и color-val. Если хотя бы в одной из них будет значение отличное от "-" (Таблица 2), то оставить все как есть. Заранее спасибо за помощь. |
скрытие колонки таблицы
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>
|
Спасибо, рони! Все работает, только есть один момент. Я заметил, что там, где в таблице есть только одна строка со значением "-", в консоли вот эта ошибка:
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)
Как ее избежать? И еще одна просьба. Для меня, в принципе это не критично, но может подскажете, что делать. Из-за того, что скрипт выполняется после загрузки всего документа, в таблице, то, что должно скрыться, на доли секунды появляется, а затем, как и нужно, пропадает. Не подскажете, как ускорить обработку таблицы скриптом? Спасибо! |
Цитата:
Цитата:
|
Цитата:
td.forEach(el => el && el.classList.add("collapse"));
Цитата:
|
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>
|
рони,
Nexus, большое спасибо за помощь! Вопросы закрыты. Скрипт срабатывает моментально и без ошибок! Пока писал свое сообщение, смотрю рони еще предложил вариант, но я уже воспользовался решением от Nexus |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 05:22. |