How to remove a column from the grid using jquery

Question

How to remove a column from the grid using jquery

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a grid where I have to leave a hidden column, I'm doing it this way but it's not doing it the way I would because I can not predict how many rows it will have in this column.

I have a grid, where in typename I have: I want to remove the entire column where I have this specific typename

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

javascript jquery

asked by anonymous 30.01.2017 / 18:44

2 answers

How to identify the click on a drawableLeft I can not capture data from JSON!

score 2 · Answer 1

One way you can do to hide all columns of rows is to iterate through them. I set an example so that you can have logic as the basis and be able to fit your scenario:

$(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><tableborder="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>

Set the variable coluna so that it hides all the defined citations there.

score 0 · Answer 2

Based on the Lucas (+1) code, I put a little button by passing the column index and turned it into function:

		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><tableborder="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>