How to get element id from the find method?

1

I'm cloning a row in the table, I can insert a new value into id , but would like to concatenate a new value to the existing id .

$("#addRow").click(function() {
  $clone = $('#tabela tbody>tr:last')
    .clone(true)
    .insertAfter('#tabela tbody>tr:last');

  $clone.find('input').attr({
    'data-id': $('#tabela tbody>tr').length,
    'id': $('#tabela tbody>tr').length
  });

  $clone.find('input').val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><tableid="tabela">
  <tbody>
    <tr>
      <td><input type="text" name="nome-1" id="nome-1" /></td>
      <td><input type="text" name="funcao-1" id="funcao-1" /></td>
      <td><input type="text" name="setor-1" id="setor-1" /></td>
    </tr>
  </tbody>
</table>

<button id="addRow">AddRow</button>

With each addition of a new line, id should be:

nome-2
funcao-2
setor-2
...
nome-10
funcao-10
setor-10
    
asked by anonymous 10.03.2017 / 19:16

2 answers

2

If it's just to concatenate, you can do something like:

  

I made id appear as input value to make it easier to see them.

$("#addRow").click(function() {
  $clone = $('#tabela tbody>tr:last')
    .clone(true)
    .insertAfter('#tabela tbody>tr:last');

  $inputs = $clone.find('input');

  $inputs.each($i => {
    $input = $($inputs[$i]);

    let id = $input.attr("id");
    let len = $('#tabela tbody>tr').length;

    $input.attr({
      'data-id': len,
      'id': id.slice(0, id.indexOf("-")+1) + len
    });

    $input.val($input.attr("id"));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><tableid="tabela">
  <tbody>
    <tr>
      <td><input type="text" name="nome-1" id="nome-1" /></td>
      <td><input type="text" name="funcao-1" id="funcao-1" /></td>
      <td><input type="text" name="setor-1" id="setor-1" /></td>
    </tr>
  </tbody>
</table>

<button id="addRow">AddRow</button>

But thus it will generate id 's very long if the number of fields extends.

    
10.03.2017 / 19:22
0

The business is to automate the possible. In this case, a regular expression can extract the number from the previous line, increment it, and then generate a function that automatically converts the attribute so that the post number is the calculated number. In concrete terms:

$("#addRow").click(function() {
  // criar a linha nova
  var $clone = $('#tabela tbody>tr:last')
    .clone(true)
    .insertAfter('#tabela tbody>tr:last');

  // número novo
  var newnum = parseInt(
    $clone.find('input')[0].id.replace(/.*-([0-9]+)$/, '$1'),
    10
  ) + 1;
  // função que substitui o atributo "a" do elemento "e"
  // de modo que o número no fim se torne "newnum"
  var repl = function (e, a) {
    $(e).attr(a,
      $(e).attr(a).replace(/^(.*-)[0-9]+$/, "$1" + newnum)
    );
  }
  // para cada controle, substitua os atributos
  // necessários de acordo com o padrão
  $clone.find('input').each(function (i, e) {
    repl(e, 'data-id');
    repl(e, 'id');
    // etc.
    $(e).val($(e).attr("id"));
  });
});
    
10.03.2017 / 20:17