Clone rows in JQuery but with different ID

Question

Clone rows in JQuery but with different ID

Navigation

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

1

Is there any way to clone an element in JQuery but that the clone has a different id?

That is, I have a table and each box has its own id, if I wanted to add a new row with a similar appearance but its boxes had another id, is that possible?

<table id="Tabla-Rutinas">
            <tr> <!-- Fila1 -->
                <td colspan="6" id="Casilla-1-1"></td>
            </tr>
            <tr> <!-- Fila2 -->
                <td id="Casilla-2-1">Nombre</td>
                <td id="Casilla-2-2">Herramienta</td>
                <td id="Casilla-2-3">Series</td>
                <td id="Casilla-2-4">Repeticiones</td>
                <td id="Casilla-2-5">Peso propuesto</td>
                <td id="Casilla-2-6">Peso final</td>
            </tr>
            <tr> <!-- Fila3 -->
                <td colspan="6" id="Casilla-3-1"></td>
            </tr>
            <tr> <!-- Fila4 -->
                <td id="Casilla-4-1"></td>
                <td id="Casilla-4-2"></td>
                <td id="Casilla-4-3"></td>
                <td id="Casilla-4-4"></td>
                <td id="Casilla-4-5"></td>
                <td id="Casilla-4-6"></td>
            </tr>
        </table>

That is, I want that table to be expandable, and I put a series of buttons depending on whether I want to add a new row like 3 (which is a single box) or a new row like 4 (which is 6) boxes).

So, if I want to click on a button, add a new row 4, but let the id of each box be, Box-5-1, Box 5-2, Box-5-3, etc.

How could it be done?

jquery

asked by NEA 31.12.2017 в 13:21

source

2 answers

1

Once the row is cloned you should go through the cells changing the id attribute:

$cela.attr('id', 'nuevoId');

Obviously the new id must be calculated from the current number of rows in the table and the index of the cell:

$(function(){
  $('button').click(function(){
    // Cogemos el nº de fila a copiar del atributo data-row
    var fila = parseInt(this.dataset.row);
    // Clonamos la fila indicada
    var nuevaFila = $('#Tabla-Rutinas tr:nth-child(' + fila + ')').clone();
    // Calculamos el número de la nueva fila
    var numeroFila = $('#Tabla-Rutinas tr').length + 1;
    // Cambiamos el atributo id de cada celda
    nuevaFila.children().each(
      (i, e) => $(e).attr('id', 'Casilla-' + numeroFila + '-' + (i+1))
    );
    // Añadimos la nueva fila después de la última fila
    $('#Tabla-Rutinas tr:last').after(nuevaFila);
    console.log(nuevaFila[0].innerHTML);
  });  
});

tr{
  height: 20px;
}
td{
  border: 1px solid #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Tabla-Rutinas">
    <tr> <!-- Fila1 -->
        <td colspan="6" id="Casilla-1-1"></td>
    </tr>
    <tr> <!-- Fila2 -->
        <td id="Casilla-2-1">Nombre</td>
        <td id="Casilla-2-2">Herramienta</td>
        <td id="Casilla-2-3">Series</td>
        <td id="Casilla-2-4">Repeticiones</td>
        <td id="Casilla-2-5">Peso propuesto</td>
        <td id="Casilla-2-6">Peso final</td>
    </tr>
    <tr> <!-- Fila3 -->
        <td colspan="6" id="Casilla-3-1"></td>
    </tr>
    <tr> <!-- Fila4 -->
        <td id="Casilla-4-1"></td>
        <td id="Casilla-4-2"></td>
        <td id="Casilla-4-3"></td>
        <td id="Casilla-4-4"></td>
        <td id="Casilla-4-5"></td>
        <td id="Casilla-4-6"></td>
    </tr>
</table>
<button data-row="1">Copiar 1</button>
<button data-row="2">Copiar 2</button>
<button data-row="3">Copiar 3</button>
<button data-row="4">Copiar 4</button>

answered by 31.12.2017 в 13:48

ERROR mysql_num_rows () expects parameter 1 to be resource, boolean given Adjust css html table

score 1 · Accepted Answer

You can do it by creating the elements and not cloning them. Creating a select where the user gets the type to add, either 1 column or 6. Then you create each element in a for and if it is a column, then you assign the colspan to take the space as if they were 6

$("button").click(function(){
  var $tabla = $("#Tabla-Rutinas");
  // obtienes el total de callizas
  var totalCasillas = $tabla.find("tr").length;
  
  // obtenemos el tipo a crear
  var tipo = parseInt($("#tipo-callizas").val());
  
  // procedemos a crear los elementos en base al tipo
  var $tr = $("<tr></tr>");
  for(var i = 0;i < tipo;i++)
  {
    // creamos la columna o td
    var $td = $("<td>prueba texto</td>")
    // le asignamos su id
    .attr("id", "Casilla-"+totalCasillas+"-"+(i+1));
    $tr.append($td);
  }
  
  if(tipo == 1) {
    // modificamos el td para asignale el colspan
    $tr.find("td").attr("colspan",6);
  }
  
  $tabla.append($tr);

});

tr td{
 background:red;
}

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

<select id="tipo-callizas">
  <option value="1"> Crear con 1 fila</option>
  <option value="6"> Crear con multiples columnas</option>
 </select>

<table id="Tabla-Rutinas">
            <tr> <!-- Fila1 -->
                <td colspan="6" id="Casilla-1-1"></td>
            </tr>
            <tr> <!-- Fila2 -->
                <td id="Casilla-2-1">Nombre</td>
                <td id="Casilla-2-2">Herramienta</td>
                <td id="Casilla-2-3">Series</td>
                <td id="Casilla-2-4">Repeticiones</td>
                <td id="Casilla-2-5">Peso propuesto</td>
                <td id="Casilla-2-6">Peso final</td>
            </tr>
            <tr> <!-- Fila3 -->
                <td colspan="6" id="Casilla-3-1"></td>
            </tr>
            <tr> <!-- Fila4 -->
                <td id="Casilla-4-1"></td>
                <td id="Casilla-4-2"></td>
                <td id="Casilla-4-3"></td>
                <td id="Casilla-4-4"></td>
                <td id="Casilla-4-5"></td>
                <td id="Casilla-4-6"></td>
            </tr>
        </table>

I did not clone it because because it could be that the models in which you want the new boxes to be created (3 and 4) are not in that order or then you change them, so you would have to modify the code as well. which one has to be cloned.