Append jquery table

Navigation
1

I currently insert data in the td of the body of my table in this way: 

<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr><!--aca necesito insertar otro th-->
  </thead>

  <tbody>
    <tr>
      <td>Jorge</td>
      <td>Casas</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>



$('#table1').append('<tr id='+token+'><td>'+variable1+'</td><td >'+variable2+'</td><td>'+variable4+'</td><td><button  type="button" onclick="Eliminar()" class="btn btn-warning"> Eliminar </button></td></tr>')

What form could I insert into the th in the thead of my table? 

$('#table1 thead').append('<tr><th>Prueba</th></tr>');//estaba probando con esto pero no lo inserta de forma correcta
    
asked by Javier Antonio Aguayo Aguilar 16.05.2017 в 15:38
source

4 answers

2

I would suggest doing the item search using #table1 > thead > tr using the child selector as follows: 

$('#table1 > thead > tr').append('<th>Prueba</th>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr> <!-- aca necesito insertar otro th -->
  </thead>

  <tbody>
    <tr>
      <td>Jorge</td>
      <td>Casas</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>
    
answered by 16.05.2017 / 16:14
source
1

You can try this way, first your table $('#table1') after that find the tag <thead> again look for your tag <tr> and now if you give append() 

$('#table1').find('thead').find('tr').append('<th>Direccion</th>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>//aca necesito insertar otro th
  </thead>

  <tbody>
    <tr>
      <td>Jorge</td>
      <td>Casas</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>

Greetings

    
answered by 16.05.2017 в 16:07
1

To do that, what I would do is take the table by its id, take the last th of the table and then insert another one, like this: 

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

	
</head>
<body>
<table id="table1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>

    </tr>//aca necesito insertar otro th
  </thead>

  <tbody>
    <tr>
      <td>Jorge</td>
      <td>Casas</td>
    </tr>
    <tr>
      <td>Juan</td>
      <td>Perez</td>
    </tr>
  </tbody>
</table>
  
<script> $("#table1 th:last").after("<th>Prueba</th>"); </script>

</body>
</html>
    
answered by 16.05.2017 в 16:11
-1

You should try the following: 

$('#table1 thead').find('tr').append( /*lo que necesites agregar*/ )
    
answered by 16.05.2017 в 15:44
Pass an array from php to get Hide in bootstrap 4