Как получить пустую длину td:nth-child?

Я пытаюсь скрыть столбцы, которые совершенно пусты. Как вы можете видеть в таблице ниже, всего 4 столбца и 5 строк. Я хочу скрыть столбец c3, потому что ни в одной ячейке нет данных. Но я хочу сохранить другие столбцы, потому что в них есть данные. (даже некоторые ячейки пусты)

     c1     c2     c3    c4
     ----------------------
1    x      x            x        
2    x                   x
3                        x
4    x      x            x
5    x      x            x

Как я могу получить пустой номер строки для каждого td: nth-child для сравнения с общими номерами строк? Так в состоянии скрыть пустые столбцы?

Вот мой код;

var rLenght = document.getElementById('table').rows.length;
var empty = ; // code for empty td:nth-child 

for (var i = 1; i<=4; i++) {
     var empty =              // code for empty td:nth-child('+i+')
            if (empty ==  rLenght) {
                $('td:nth-child('+i+'),th:nth-child('+i+')').hide();
            }
    }

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

— 14.12.2020 16:13

Я хочу знать, сколько пустых строк в каком столбце таблицы. Когда я получаю этот результат, если общее количество строк равно количеству пустых строк, это означает, что все строки в этом столбце пусты. Так что я могу скрыть этот столбец.

— 14.12.2020 16:24

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

— 14.12.2020 16:29

javascript jquery

14.12.2020 16:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

304

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Попробуй это

Создание массива найденных непустых

const cols = new Array(document.querySelectorAll("thead tr th").length-1)
  .fill(0);
document.querySelectorAll("tbody tr")
  .forEach(tr => tr.querySelectorAll("td")
    .forEach((td,i) => cols[i] += td.textContent.trim() !== ""))

document.querySelectorAll("tr").forEach(
  tr => tr.querySelectorAll("*").forEach(
    (td,i) => td.classList.toggle("hide",cols[i]===0)
  )
)

.hide { display:none}

<table>
  <thead>
    <tr>
      <th>c1</th>
      <th>c2</th>
      <th>c3</th>
      <th>c4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>2</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>3</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>4</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>5</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
  </tbody>
</table>

Вместо этого использование массива cols должно быть быстрее

const cols = new Array(document.querySelectorAll("#tb thead tr th").length)
  .fill(0);

document.querySelectorAll("tbody tr")
  .forEach(tr => tr.querySelectorAll("td, th")
    .forEach((td, i) => cols[i] += td.textContent.trim() === "" ? 0 : 1) // replace the 0 with number of cells with content
  )  

const rows = document.querySelectorAll("tr");
cols.forEach((col,i) => document.querySelectorAll("#tb tr")
  .forEach(tr => tr.querySelectorAll("td, th")[i].classList.toggle("hide", col === 0)));

.hide {
  display: none
}

<table id = "tb">
  <thead>
    <tr>
      <th>c1</th>
      <th>c2</th>
      <th>c3</th>
      <th>c4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>2</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>3</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>4</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>5</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
  </tbody>
</table>

Пагинация

const hide = () => {
  const cols = new Array(document.querySelectorAll("#tb thead tr th").length).fill(0);
  const tb = document.getElementById("tb")
  const bodyRows = tb.querySelectorAll("tbody tr");
  const rows = tb.querySelectorAll("tr");
  bodyRows.forEach(tr => tr.querySelectorAll("td, th")
    .forEach((td, i) => cols[i] += td.textContent.trim() === "" ? 0 : 1) // replace the 0 with number of cells with content
  )
  cols.forEach((col, i) => rows.forEach(tr => tr.querySelectorAll("td, th")[i].classList.toggle("hide", col === 0)));
};
window.addEventListener("load", function() {
  tb.querySelector("tbody").innerHTML = page1;
  hide();
  document.getElementById("next").addEventListener("click", function() {
    tb.querySelector("tbody").innerHTML = page2;
    hide();
  })
})

const page1 = `<tr>
      <th>1</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>2</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>3</th>
      <td></td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <th>4</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>5</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>`;
const page2 = `<tr>
      <th>1</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>2</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>3</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>4</th>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <th>5</th>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>`

.hide {
  display: none
}

<table id = "tb">
  <thead>
    <tr>
      <th>c1</th>
      <th>c2</th>
      <th>c3</th>
      <th>c4</th>
    </tr>
  </thead>
  <tbody></tbody>
</table><br/>
<button id = "next">Next</button>

@ErselÇakmak Я нашел более быстрое решение, используя созданный мной массив cols

— 14.12.2020 19:36

Привет еще раз. Сейчас пытаюсь использовать этот код в таблицах с нумерацией страниц. Но естественно это работает только на первой странице таблицы. Есть ли решение для пагинации?

— 24.02.2021 11:35

Почему это будет работать только на первой странице таблицы?

— 24.02.2021 11:37

Я принял ваш ответ, но думаю, что вернул его с промахом, извините за это. Когда страница загружается, в моей таблице отображаются первые 10 записей. После этого без загрузки страницы я могу переключиться на страницу 2 или изменить количество отображаемых записей и расширить таблицу. По этой причине, когда я переключаю страницу, все скрытые столбцы снова появляются.

— 24.02.2021 11:55

Смотрите обновление. Вам нужно скрывать каждый раз, когда вы загружаете новые строки

— 24.02.2021 12:00

Это сработало отлично. Спасибо. Вы мне очень помогли.

— 24.02.2021 13:12

14.12.2020 16:23

Пустой селектор: https://api.jquery.com/empty-selector/ может быть?

var rLenght = document.getElementById('tbody').rows.length;

for (var i = 1; i<=4; i++) {
  var empty = $('td:nth-child('+i+'):empty');
  if (empty.length === rLenght) {
    $('td:nth-child('+i+'),th:nth-child('+i+')').hide();
  }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id = "table">
  <thead>
    <tr>
      <th>c1</th>
      <th>c2</th>
      <th>c3</th>
      <th>c4</th>
    </tr>
  </thead>
  <tbody id = "tbody">
    <tr>
      <td>x</td>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td></td>
      <td>x</td>
    </tr>
  </tbody>
</table>

14.12.2020 16:30

Другие вопросы по теме

Уменьшите несколько операторов if для добавления класса (jQuery)

Читать больше и меньше не работает после отображения данных из ajax

Значок видимости пароля с использованием fontawesome

Как сделать первое выбранное изображение миниатюрным изображением из списка изображений в jquery?

Bootstrap 4 сломал мою функцию jQuery fadeOut/fadeIn?

Как отобразить показать / скрыть таблицу при нажатии кнопки «плюс-минус»

Javascript - получить текст вместо значений из нескольких полей выбора

Как перебирать вложенные элементы div с помощью cheerio

Как установить css в jQuery с несколькими комбинаторами

Как добавить параметр в Javascript и удалить предыдущий параметр

Как получить пустую длину td:nth-child?

Ответы 2

Другие вопросы по теме

Похожие вопросы