How to remove a grid column using jquery

Asked

Viewed 771 times

1

I have a grid where I have to leave a hidden column, I’m doing this way more is not doing the way I would like because I have no way to predict how many lines will have in this column.

I have a grid, where in typename I have : I want to remove the entire column where you 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

  • and how do you know which line is hidden ?

  • I want to hide column 21

  • I have a grid, so I can remove the th column more in the case of td I have no way of knowing how many lines will be on the grid

  • but what column 21 has different from the others?

  • each column has an ex: typename="approvedGerence"

  • @itasouza put all the information necessary to answer this question. This question, as it is, is incomprehensible.

  • @itasouza, we need something that only column 21 will have to identify her, if she does not have an exclusive information it will be impossible to do what you want...

Show 2 more comments

2 answers

2

One way you can hide all the columns in the rows is to iterate through them. I made an example so that you can have logic as a basis and be able to adapt to 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>

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

I defined the variable coluna so that he hides all the culunas set there.

  • did not work because I do not have a common table, td is not in the same structure

  • What do you mean? Sorry, I don’t understand @itasouza

0

Based on Lucas' code (+1), I placed a button passing the column index and turned it into a 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>


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

Browser other questions tagged javascript jquery

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