How to add input dynamically after second table header

Asked

Viewed 99 times

3

I have a problem, I would like to insert inputs dynamically in a table with more than one header, in my script by clicking on the image of + lines are being added after the first header but not in the sequence, i.e., in the lines following the second header, as well as deleting the lines from the first header and also from the second header.

I put an example in Jsfiddle, see:

https://jsfiddle.net/t5soaubu/

I tried to make a change to this code snippet by inserting the class linhas, but without success:

    <tr class="linhas">
  <td><input type="text" name="rg[]" style="text-align:center" id="rg[]" /></td>
  <td><input type="text" name="endereco[]" style="text-align:center" id="endereco[]" /></td>
  <td><input type="text" name="municipio[]" style="text-align:center" id="municipio[]" /></td>
  <td><input type="text" name="uf[]" style="text-align:center" id="uf[]" /></td>
</tr>
jquery html

1 answer

2


You can target the second header by placing a specific class:

HTML

<tr class="segundoHeader"> ... </tr>

Javascript

$(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    novoCampo.find("input").val("");
    novoCampo.insertAfter("tr.linhas:last");

    novoCampo = $("tr.segundoHeader:first").clone();
    novoCampo.find("input").val("");
    novoCampo.insertAfter("tr.segundoHeader:last");  

    removeCampo();
});

Jsfiddle: https://jsfiddle.net/t5soaubu/4/

  • Hello @Lucas Costa, doing this I can insert in the second header but not in the first, the intention is to be simultaneous, both in the first and second, thanks for the tip, I will edit my question.

  • Hello @Lucas Costa, works in the first interaction, the second time I click on the '+' icon the lines are being inserted only in the second header, thanks.

  • @Lucascosta if you clone .linhas for .segundoHeader from 2 click to add inputs 2 lines will be added in segundoHeader as is happening in your example

  • Clonei de .linhas to take advantage of the remove @adventistapr button. Updated.

  • Wow, thanks @Lucas Costa and Leonardo Rodrigues, it was great, but I need one more help I forgot to put in the question, the possibility of removing these lines, because by clicking on the '-' icon I delete the lines of the first header.

  • 1

    Thanks for the excellent help.

Show 1 more comment

Browser other questions tagged jquery html

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