Traverse all rows of a table Html and hide if any column 5 is empty

Question

Traverse all rows of a table Html and hide if any column 5 is empty

Navigation

#1 by (3 votes)

1

I do not have advanced jquery knowledge and I need to go through all the rows of a html table and hide the entire Line if the column from 5 JUS) is empty and refresh the sequence numbering of the first Id column, eg:

I want to hide the entire row if 5 and 6 (and if there is 7,8, n ...) column is empty:

Ineedyoutolooklikethis:

Ineededtohidethecolumnsandusedthecodebelowsuggestedandacceptedby Felipe Duarte in this post How to traverse all columns of a table with jquery and hide if empty

var i = 1;
$('table.grid tr td').each(function (el) {
    if ($(this).text() == '') {
          $('table.grid td:nth-child(' + i + '), th:nth-child(' + i + ')').hide();
    }
    i++;
})

This is the current structure of my table:

<table class="grid">
    <thead>
        <tr class="head">
            <th>ID</th>
            <th>Empresa</th>
            <th>PAR</th>
            <th>Data</th>
            <th>JUS</th>
            <th>ST</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="6">1 </td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
            <td>A5</td>
            <td>A6</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
            <td></td>
            <td>B6</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
            <td>C5</td>
            <td>C6</td>
        </tr>
    </tbody>
</table>

html jquery asp.net-mvc

asked by anonymous 17.06.2017 / 15:33

1 answer

PHP Parse error: Invalid numeric literal How to keep the rotation of the images, even with mouse hover?

score 3 · Accepted Answer

A minimum example is to create a function that I can read the tr of this table and find in the column specifies if it has no value.

function ocultar() {
  var table = $('table.grid');
  var i = 0;
  table.find('tr').next('tr').each(function() {
    if ($(this).find('td').eq(4).text() == '') {
      $(this).hide();
    } else {      
        $(this).find('td').eq(0).text(++i);      
    }
  });
}
$(document).ready(function() {
   // se quiser que fique dinamico descomente aqui.
  //ocultar();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="grid" border="1" width="100%">
  <tr>
    <td>ID</td>
    <td>EMPRESA</td>
    <td>PAR</td>
    <td>DATA</td>
    <td>JUS</td>
    <td>ST</td>
  </tr>
  <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
    <td>A4</td>
    <td>A5</td>
    <td>A6</td>
  </tr>
  <tr>
    <td>B1</td>
    <td>B2</td>
    <td>B3</td>
    <td>B4</td>
    <td></td>
    <td>B6</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
    <td>C5</td>
    <td>C6</td>
  </tr>
</table>

<button onclick="ocultar()">Ocultar</button>

With tbody :

function ocultar() {
  var table = $('table.grid');
  var i = 0;
  table.find('tbody > tr').each(function() {
    if ($(this).find('td').eq(4).text() == '') {
      $(this).hide();
    } else {     
        $(this).find('td').eq(0).text(++i);
    }
  });
}
$(document).ready(function() {
  // se quiser que fique dinamico descomente aqui.
  //ocultar();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="grid" border="1" width="100%">
  <thead>
  <tr>
    <td>ID</td>
    <td>EMPRESA</td>
    <td>PAR</td>
    <td>DATA</td>
    <td>JUS</td>
    <td>ST</td>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>A1</td>
      <td>A2</td>
      <td>A3</td>
      <td>A4</td>
      <td>A5</td>
    </tr>
    <tr>
      <td>B</td>
      <td>B1</td>
      <td>B2</td>
      <td>B3</td>
      <td></td>
      <td>B5</td>
    </tr>
    <tr>
      <td>C</td>
      <td>C1</td>
      <td>C2</td>
      <td>C3</td>
      <td>C4</td>
      <td>C5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
       <td colspan="6"></td>
    </tr>
  </tfoot>
</table>

<button onclick="ocultar()">Ocultar</button>

The other way would be if you already bring this ready data of your Controller , I believe it is still the best option. Since your part of code is not listed, I can not reproduce an example ...