jquery посчитать количество непустых ячеек в каждой колонке таблицы

168
13 февраля 2019, 11:20
     <table class="myTable">      
           <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
          </thead>
          <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
     </table>

Как посчитать количество непустых ячеек в каждой колонке таблицы с помощью Jquery и отобразить результаты в первой строке после заголовков если столбцов в таблице 60 штук и строк больше 500?

Спасибо.

Answer 1

Только не очень понял, куда именно надо вывести результаты, поэтому пока вывел их в консоль, но суть от этого не меняется:

const cols = $('tr:first-child').find('td').length; //считаем количество колонок 
for(let i = 1; i <= cols; i++) { //в цикле по колонкам 
  let count = 0; //создаем счётчик 
  $('td:nth-child('+i+')').each(function(){ //в цикле по ячейкам каждой колонки 
    if($(this).text() != '') { //проверяем, не пустая ли она 
      count++; //увеличиваем счётчик 
    } 
  }); 
  console.log(count); //выводим результат по каждой колонке 
}
.myTable { 
  border-collapse: collapse; 
  margin-bottom: 100px; 
} 
.myTable th { 
  padding: 20px; 
  border: 1px solid red; 
} 
.myTable td { 
  padding: 30px; 
  border: 1px solid black; 
  box-sizing: border-box; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table class="myTable">       
      <thead> 
            <tr> 
                <th></th> 
                <th></th> 
                <th></th> 
                <th></th> 
            </tr> 
            <tr> 
                <th></th> 
                <th></th> 
                <th></th> 
                <th></th> 
            </tr> 
      </thead> 
      <tbody> 
            <tr> 
                <td>123</td> 
                <td></td> 
                <td></td> 
                <td>ыва</td> 
            </tr> 
            <tr> 
                <td></td> 
                <td>ddgh</td> 
                <td></td> 
                <td></td> 
            </tr> 
            <tr> 
                <td>sdf</td> 
                <td></td> 
                <td></td> 
                <td></td> 
            </tr> 
            <tr> 
                <td></td> 
                <td>456</td> 
                <td></td> 
                <td></td> 
            </tr><tr> 
                <td></td> 
                <td></td> 
                <td>789</td> 
                <td></td> 
            </tr> 
            <tr> 
                <td>012</td> 
                <td></td> 
                <td></td> 
                <td>hjk</td> 
            </tr> 
     </tbody> 
 </table>

READ ALSO
fancybox кеширование при ajax режиме

fancybox кеширование при ajax режиме

Каждый раз при вызове такой всплывающей формы обратной связи, оно подгружается на страницу

153
Как мне добиться анимации такой

Как мне добиться анимации такой

Привет ребята есть вопрос по поводу вёрстки html css jquerry и т д, как мне добиться появления плавного бордера как на картинке при наведении, спасибо...

147
сериализация xml

сериализация xml

При сериализации объекта символы < и > выводятся не так (последняя строка файла)

146
Можно ли вращать приложения в Windows?

Можно ли вращать приложения в Windows?

Можно ли вращать из своего приложения , другие запущенные приложения в Windows ?

121