How to add input dynamically after second header table

Question

How to add input dynamically after second header table

Navigation

#1 by (2 votes)

3

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

I've put an example in JSFiddle, see:

link

I tried to make a change in 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>

html jquery

asked by anonymous 25.01.2017 / 11:44

1 answer

Overwriting property () in the child class Return substring defined by blocks in Python, in the first occurrence

score 2 · Accepted Answer

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