Insert rows in HTML table, increasing their id

Question

Insert rows in HTML table, increasing their id

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Dear: How can I do to insert rows in an html table, where the inserted elements are inputs of type text, and I need that each one has a different id. Using one of the solutions proposed by the user Juan Pinzón (from already grateful). I came to the following:

<!-- <!DOCTYPE html>    
<html>
   <head>
       <script src="jquery-3.3.1.min.js"></script>
       <meta charset="utf-8">
   <body>
       <button type="button" id="agregar">Agregar</button>
       <table id="tabla">
           <thead>
               <tr>
                   <th scope="col">Nombre</th>
                   <th scope="col">Apellido</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>
                   </td>
                   <td>
                   </td>
               </tr>
            </tbody>
        </table>
    </body>
</html>


<script>
$("#agregar").on("click", function(){
    $('#tabla > tbody:last-child').append(                                        '<tr>   <td><input type="text" name="nombre" id="nombre" ></td><td><td><input type="text" name="apellido" id="apellido" ></td><td>');
});
</script>

Now, as I do so that id="name", the second time I click on "add", go to id="name2", I think I should do a cycle (for or while) where this increase variable, but I can not implement it with this function of jquery, I managed to do something similar with php (in another circumstance), but here it does not work, since when from php I must call it with echo, it starts a coke of single and double quotes impossible to solve . As you may have noticed, I am quite new to the subject. So, if you send me to investigate a function, library, etc, everything is more than good. Thank you very much, and excuse the extensive consultation. Greetings. PS: if for some reason the code is not shown complete (like me in the preview), I tell you that in the body of the html the table is created as table id="table".

javascript jquery html

asked by FerMV 25.10.2018 в 14:13

source

2 answers

0

Try getting the total of input previously recreated and concatenating the total to the new id:

$("#agregar").on("click", function(){

    // obtenemos el total de los inputs anteriormente creados
    var totalInputs = $('#tabla tr input[type=text]').length;

    $('#tabla > tbody:last-child').append(
    '<tr>   <td><input type="text" name="nombre" id="nombre'+totalInputs+'" ></td><td><td><input type="text" name="apellido" id="apellido" ></td><td>');
});

answered by 25.10.2018 в 14:18

Problem when reloading page Why would JWTAuth not accept Barer in the token, laravel?

score 0 · Accepted Answer

With your code and jquery it would be like this:

$("#agregar").on("click", function(){

  var numTr = $('#tabla tbody tr').length + 1;

  $('#tabla tbody tr:last')
  .after('<tr>
             <td>
               <input type="text" name="nombre${numTr}" id="nombre${numTr}" value="nombre${numTr}">
             </td>
             <td>
               <input type="text" name="apellido${numTr}" id="apellido${numTr}" value="apellido${numTr}">
             </td>
           </tr>');
  
});

<table id="tabla" border="1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="nombre1" id="nombre1" value="nombre1">
      </td>
      <td>
        <input type="text" name="apellido1" id="apellido1" value="apellido1">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" align="center">
        <button id="agregar">Agregar</button>
      </td>
    </tr>
  </tfoot>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I simply count how many rows there are and I add 1, that's what I'm going to concatenate to the attributes of the first and last name fields in the new row. I hope it serves you.