Scroll through all rows of an Html table and hide if any column 5 is empty

Asked

Viewed 5,846 times

1

I have no advanced knowledge with jquery and need to go through all lines of an HTML table and hide the Line entire case the column from of the number 5 (JUS) be empty and update the sequence numbering of the first column Id, example:

I want to hide the whole row if the 5 and 6 (and the rest if there is 7,8,n...) column is empty: inserir a descrição da imagem aqui

I need you to stay like this:inserir a descrição da imagem aqui

I had to hide the columns and used the code below suggested and accepted by Felipe Duarte in that post How to go through all columns of a jquery table 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>
jquery html asp.net-mvc

  • Instead of manipulating the DOM to do this, you didn’t think to do this back-end check and send only the list that should be populated in the table?

  • Yes, but at the moment it is not viable I have to do something manipulating the DOM.

  • Got it @Adrianosuv, is that an end-point filter would solve much more perfomatic and elegant, or even in receiving the data on the front (if the request is ajax) - both forms would not need to reassemble the table once created.

  • @Lucas Costa I will take into consideration this alternative also is that my problem is that I need is with it working perfectly today! rs To in a sweat!!

1 answer

3


A minimal example is to create a function that I can read 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>
<table class="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>
<table class="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 you already bring this data ready from your Controller, I believe it is still the best option. As there is no part of your code, I can not reproduce an example ...

References

  • Hello @Virgilio Novic need to manipulate the DOM due to the current scenario, at the moment you can do in Controller.

  • So @Adrianosuv my answer is with manipulation of Dom from a glance I made up a new edition.

  • @Vigilio Novic error occurred: Deferred exception: Cannot read property 'innerHTML' of undefined TypeError: Cannot read property 'innerHTML' of undefined I tried to change the innerHTML for text but the same error occurs.

  • I’ll see the new edition

  • No more error occurs, I will test and answer here if it is ok.

  • @Adrianosuv the example is for you to understand the process and put in your, as you did not put in your question the table may have to adapt the code, because you may notice that in the answer is working...

  • Yes for sure! I’m implementing

  • It works perfectly based on the example table but the structure of my table is not working. From what I understand if there is at least one empty cell all lines are hidden. my table has tags thead, tfoot and tbody I tried to manipulate the script but I have a little difficulty I will edit the post and include my table I thank you in advance.

  • @Adrianosuv edited with the tag tbody!!! two options ...

Show 4 more comments

Browser other questions tagged jquery html asp.net-mvc

You are not signed in. Login or sign up in order to post.