1

Não tenho conhecimento avançado com jquery e preciso percorrer todas as linhas de um table Html e ocultar a Linha inteira caso a coluna a partir da número 5 (JUS) seja vazia e atualizar a numeração sequencia da primeira coluna Id, exemplo:

Quero ocultar a linha inteira caso a 5 e 6 (e demais se houver 7,8,n...) coluna seja vazia: inserir a descrição da imagem aqui

Preciso que fique assim:inserir a descrição da imagem aqui

Precisei ocultar as colunas e usei o código abaixo sugerido e aceito pelo Felipe Duarte nesse post Como percorrer todas colunas de uma table com jquery e ocultar se for vazia

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++;
})

Essa é a estrutura atual da minha 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>
4
  • Ao invés de manipular o DOM para fazer isso, não pensou em fazer essa verificação no back-end e enviar somente a lista que deverá ser populada na tabela?
    – BrTkCa
    Commented 17/06/2017 às 14:01
  • Sim, mas no momento não é viável tenho que fazer algo manipulando o DOM.
    – hard123
    Commented 17/06/2017 às 14:07
  • Entendi @AdrianoSUV, é que um filter no end-point resolveria bem mais perfomático e elegante, ou até no recebimento dos dados no front (caso a requisição for ajax) - ambas as formas não precisariam remontar a tabela depois de criada.
    – BrTkCa
    Commented 17/06/2017 às 14:10
  • @Lucas Costa vou levar em consideração essa alternativa também é que o meu problema é que preciso está com isso funcionando perfeitamente hoje! rs To numa suadeira!!
    – hard123
    Commented 17/06/2017 às 14:55

1 Resposta 1

3

Um exemplo minimo é criar uma função que consigo ler as tr dessa tabela e encontrar na coluna especifica se a mesma não tem nenhum valor.

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>


Com 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>


A outra forma seria você já trazer esses dados prontos do seu Controller, acredito ainda ser a melhor opção. Como não consta a sua parte de codigo, não tenho como reproduzir um exemplo ...

Referencias

9
  • Olá @Virgilio Novic preciso manipular o DOM devido ao cenário atual, no momento dá pra fazer no Controller.
    – hard123
    Commented 17/06/2017 às 14:08
  • Então @AdrianoSUV a minha resposta está com manipulação de Dom de uma olhada fiz até uma nova edição.
    – novic
    Commented 17/06/2017 às 14:10
  • @Vigilio Novic ocorreu esse erro: Deferred exception: Cannot read property 'innerHTML' of undefined TypeError: Cannot read property 'innerHTML' of undefined tentei alterar o innerHTML para text mas ocorre o mesmo erro.
    – hard123
    Commented 17/06/2017 às 14:10
  • Vou ver a nova edição
    – hard123
    Commented 17/06/2017 às 14:10
  • Não ocorre mais erro, vou testar e respondo aqui caso estiver ok.
    – hard123
    Commented 17/06/2017 às 14:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .