How to get element id from find method?

Asked

Viewed 85 times

1

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

$("#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>
<table id="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, the id must be:

nome-2
funcao-2
setor-2
...
nome-10
funcao-10
setor-10
javascript jquery

  • It’s not enough to do: 'id': "test-" + $('#tabela tbody>tr').length?

  • This is just an example, @Andersoncarloswoss. There will be N inputs and that way it becomes unviable.

2 answers

2


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

I made the id appear as the value of input to facilitate the display of these.

$("#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>
<table id="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 so it will beget id's quite long if the number of fields extends.

  • This way, will come the first index of inputs in $input.attr("id") and not the current.

  • In fact he always seeks the id of the latter input inserted and concatenates the total number of input's in the same. According to your question, this is what you need.

  • I added some inputs to the simulation, @Anderson.

  • @Marcelodeandrade, I added the fields to the answer. See if this meets your need.

  • I have now corrected the generation of id's. It was very confusing because in the question you said just concatenate with the current value and this does not imply changing it, just add to the end. Now it’s gone as expected, I believe.

0

The business is to automate as much as 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 postposed 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"));
  });
});

Browser other questions tagged javascript jquery

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