jQuery Klon Tabellenzeile (DATA)

Question

Ich habe eine Tabelle Eingabeformular wie auf dem Bild. Ich möchte, dass Benutzer nur die erste Zeile eingeben können (Hostname, Modell, Standort, gekaufte Felder, Garantiefelder) und dann die Option "Erste Zeile klonen" drücken können, und sie kopiert das, was sie eingegeben haben, in alle nachfolgenden Zeilen.

Wie funktioniert das am besten in jQuery?

Die Zeilen werden in PHP mit diesem Code erzeugt, und alle haben eindeutige IDs:

<?php for($t = 1; $t <= 20; $t++){ ?> 
     <tr> 
      <td><input type="text" name="hostname-<?=$t;?>" class="form-control" id="hostname-<?=$t;?>"></td> 
      <td><input type="text" name="asset-tag-<?=$t;?>" class="form-control" id="asset-tag-<?=$t;?>"></td> 
      <td><input type="text" name="serial-<?=$t;?>" class="form-control" id="serial-<?=$t;?>"></td> 

Answer 1

$("button").on("click", function() { 
 
    var firstRow = $("table").find("tr:first-child"), 
 
     rowsToModify = firstRow.nextAll(); 
 
     
 
    firstRow.find(":input").each(function(idx) { 
 
     rowsToModify.find(":input:eq(" + idx + ")").val(this.value); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="text" name="hostname-0" class="form-control" id="hostname-0"></td> 
 
     <td><input type="text" name="asset-tag-0" class="form-control" id="asset-tag-0"></td> 
 
     <td><input type="text" name="serial-0" class="form-control" id="serial-0"></td> 
 
     <td> 
 
     <select name="state-0" class="form-control" id="state-0"> 
 
      <option>Open</option> 
 
      <option>Waiting</option> 
 
      <option>Closed</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" name="hostname-1" class="form-control" id="hostname-1"></td> 
 
     <td><input type="text" name="asset-tag-1" class="form-control" id="asset-tag-1"></td> 
 
     <td><input type="text" name="serial-1" class="form-control" id="serial-1"></td> 
 
     <td> 
 
     <select name="state-1" class="form-control" id="state-1"> 
 
      <option>Open</option> 
 
      <option>Waiting</option> 
 
      <option>Closed</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" name="hostname-2" class="form-control" id="hostname-2"></td> 
 
     <td><input type="text" name="asset-tag-2" class="form-control" id="asset-tag-2"></td> 
 
     <td><input type="text" name="serial-2" class="form-control" id="serial-2"></td> 
 
     <td> 
 
     <select name="state-2" class="form-control" id="state-2"> 
 
      <option>Open</option> 
 
      <option>Waiting</option> 
 
      <option>Closed</option> 
 
     </select> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<button type="button">Clone values from first row</button>