1

Tenho um grid onde tenho que deixar uma coluna oculta, estou fazendo desta forma mais não está fazendo da forma que gostaria porque não tenho como prever quantas linhas vai ter nesta coluna.

Tenho um grid, onde no typename tenho : Quero remover a coluna inteira onde tenha este typename especifico

<html>
    <head>
        <title>Matheus Piscioneri</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $(document.getElementsByTagName('th')[21]).hide()
                $(document.getElementsByTagName('td')[21]).hide()
              });
        </script>
    </head>
    <body>

        <th typename="aprovacaoAprovadorExtra" style="cursor: default" title="Aprovação - Aprovador Extra">
        </th>

        <td class="">Não </td>

    </body>
</html>
7
  • e como sabes qual a linha oculta ?
    – MoshMage
    Commented 30/01/2017 às 17:48
  • Quero ocultar a coluna 21
    – Harry
    Commented 30/01/2017 às 17:51
  • Tenho um grid, então eu consigo remover a coluna th mais no caso do td não tenho como saber quantas linhas vai ter no grid
    – Harry
    Commented 30/01/2017 às 17:52
  • mas o que a coluna 21 tem de diferente das outras? Commented 30/01/2017 às 17:52
  • cada coluna tem um ex: typename="aprovacaoGerencia"
    – Harry
    Commented 30/01/2017 às 17:53

2 Respostas 2

2

Uma forma que você pode fazer para esconder todas as colunas das linhas é iterar por elas. Fiz um exemplo para que você possa ter a lógica como base e poder adequar ao seu cenário:

$(document).ready(function() {
  var coluna = 1;
  $(document.getElementsByTagName('th')[coluna]).hide()

  document.getElementsByTagName('tbody')[0].querySelectorAll('tr').forEach(function(a) {
    $(a.querySelectorAll("td")[coluna]).hide();
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

Defini a variável coluna para que ele esconda todas as culunas definidas ali.

2
  • não deu certo, porque eu não tenho uma tabela comum, o td não fica na mesma estrutura
    – Harry
    Commented 30/01/2017 às 18:21
  • Como assim? Desculpe, não entendi @itasouza
    – BrTkCa
    Commented 30/01/2017 às 18:43
0

Com base no código do Lucas (+1), coloquei um botãozinho passando o índice da coluna e transformei em função:

		function ocultar_coluna(coluna)
		{
			$(document.getElementsByTagName('th')[coluna]).hide();
			
			var linhas = document.getElementsByTagName('tbody')[0].querySelectorAll('tr');
			
			for (var i = 0; i < linhas.length; i++) 
			{
				var colunas = linhas[i].querySelectorAll('td');
				$(colunas[coluna]).hide()
			}
		}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <table border="1">
      <thead>
        <tr>
          <th>Coluna 0 <input type="button" onclick="ocultar_coluna(0)" value="Ocultar"></th>
          <th>Coluna 1 <input type="button" onclick="ocultar_coluna(1)" value="Ocultar"></th>
          <th>Coluna 2 <input type="button" onclick="ocultar_coluna(2)" value="Ocultar"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>0</td>		
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>0</td>		
          <td>1</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>

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 .