jQuery克隆表行（DATA）

Question

我有一張表格輸入圖片。 我希望用戶能夠僅輸入第一行（主機名，型號，位置，購買的產品，保修字段），然后單擊“克隆第一行”，然后它將輸入的內容復制到所有后續行中。

如何最好地做到這一點的jQuery？

這些行是使用此代碼在PHP中生成的，並且所有行都有唯一的ID：

<?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>