Question

我必须做一个能耗计算器。我创建一个表，其中的一行ID为“ device_1”。单击表下方的按钮后，我想创建同一行，但ID为“ device_2”或更高。稍后，我想在单击“ X”按钮后删除行。我该怎么办？

我只能制作一个具有相同ID的简单重复行。我不知道如何解决这个问题。

<tbody>
   <tr id="device_1">
        <td><input type="text" class="form-control name" value="" placeholder="Enter name"></td>
        <td><input type="text" class="form-control power" value="" placeholder="Enter power"></td>
        <td><input type="text" class="form-control time" value="" placeholder="Enter avg time of use"></td>
         <td><input type="button" class="btn btn-sm btn-danger" id="removeDevice" value="X"></td>
    </tr>
</tbody>

Answer 1

只需克隆原始行，使用.attr将ID设置为新行，然后删除，找到最接近的tr并将其删除（使用事件委托，这样它就可以在新创建的行上使用行）：

$(function() {
    var id = 1;
    var $row = $('#device_1');
    $('button').on('click', function() {
        id++;
        $('table').append($row.clone().attr('id', 'device_' + id));
    });
    $('table').on('click', '[type="button"]', function() {
        $(this).closest('tr').remove();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr id="device_1">
        <td><input type="text" class="form-control name" value="" placeholder="Enter name"></td>
        <td><input type="text" class="form-control power" value="" placeholder="Enter power"></td>
        <td><input type="text" class="form-control time" value="" placeholder="Enter avg time of use"></td>
         <td><input type="button" class="btn btn-sm btn-danger" id="removeDevice" value="X"></td>
    </tr>
    </table>
    <button>+</button>

Answer 2

如果您的表的开头有更多行，并且计数id应该从最后一行开始而不是1，则可以使用以下代码（只是更新了dave上面的代码）：

$(function() {
$('button').on('click', function() {
    //select the last tr row
    var row = $('table tr:last')
    //get the last row id number using split by _ and add +1
    var id = parseInt(row.attr('id').split('_')[1]) + 1;
    $('table').append(row.clone().attr('id', 'device_' + id));
});
$('table').on('click', '[type="button"]', function() {
    $(this).closest('tr').remove();
}); });

如何使用下一个ID号创建一行

2 个答案: