Insert td into tr using jquery

Asked

Viewed 76 times

-1

need to insert some TD within the TR using jquery.

I’m doing it like this, but it doesn’t work

$(document).ready(function() {

  $("table tbody .titulo").after("<td class='none'></td><td class='none'></td><td class='none'></td>");

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="simple-table" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Página/Recurso</th>
      <th>Ver</th>
      <th>Editar</th>
      <th>Excluir</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="titulo" colspan="4"><b class="blue">Topico 1</b></td>
    </tr>

    <tr>
      <td class="p1">Contato</td>
      <td><input name="permisao[]" type="checkbox" value="Ver"></td>
      <td><input name="permisao[]" type="checkbox" value="Editar"></td>
      <td><input name="permisao[]" type="checkbox" value="Excluir"></td>
    </tr>

    <tr>
      <td class="titulo" colspan="4"><b class="blue">Topico 2</b></td>
    </tr>

    <tr>
      <td class="p1">Contato</td>
      <td><input name="permisao[]" type="checkbox" value="Ver"></td>
      <td><input name="permisao[]" type="checkbox" value="Editar"></td>
      <td><input name="permisao[]" type="checkbox" value="Excluir"></td>
    </tr>



  </tbody>
</table>

javascript jquery
  • 1

    It’s working normal. You don’t see anything because you’re adding empty TD’s.

  • They need to be empty, I just need them there for the table formatting to be right.

  • Look at the "inspect elements" of the browser that you will see they are.

  • They are not, see http://prntscr.com/o1hnzf

  • Cannot repeat id’s. By print, it would have to be $("#titulo").after(... where the id titulo be unique on the page.

  • Find out the problem, I had put the $(document).ready(function() { after the jQuery(function($) {, should be at the beginning. But then discover something else, the append is adding, but after the table is loaded, it is possible to have it loaded together with the table?

Show 1 more comment

1 answer

1

Confers http://api.jquery.com/append/

A generic example:

$("table tr").append("<td>COLUNA_02</td>");
table tr td{
background-color:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>COLUNA_01</td>
</tr>
</table>

Browser other questions tagged javascript jquery

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