javascript - 将新项目添加到清单

Question

我正在尝试创建一个允许用户添加自己的项目的清单。

这是我的 HTML 的一部分：

<tr>
    <td>
        <input name="checkbox65" id="checkbox65" type="checkbox" />
    </td>
    <td>
        <label for="checkbox65">Get directions for where you are going</label>
    </td>
</tr>
 <h3>
   My items
  </h3>

<fieldset data-role="controlgroup">
    <label for="textinput4">Add new item</label>
    </td>
    <input name="new_item" id="textinput4" placeholder="" value="" type="text"
    />
</fieldset>
 <input type="submit" id="add" value="Add" />

这是我的脚本：

<script>
    $('#add').on('click', function (e) {
        var $this = $(this);
        var $newRow = $this.closest('table').find('tr:first').clone();
        $newRow.find(':input').val('');
        $newRow.insertAfter($this.parent());
    });
</script>

但我只是没有得到任何回应..

Answer 1

这是你需要的吗？

HTML

<h3>My items</h3>
<table id="myTable">
    <tr>
        <td>
            <label for="checkbox65">
                <input name="checkbox65" class="checkbox65" type="checkbox" />
                Get directions for where you are going
            </label>
        </td>
    </tr> 
    <tr><td>
    <fieldset data-role="controlgroup">
        <label for="textinput4">
            Add new item
            <input name="new_item" id="textinput4" placeholder="" value="" type="text" />
        </label>
    </fieldset>
    <button id="add">Add</button>
    </td></tr>
</table>

请注意，我已更改id="checkbox65"为，class="checkbox65"因为您不能两次使用相同的 id。也更改input type=submit为新元素<button>。adding

JS

$('#add').on('click', function (e) {
    var $this = $(this);
    var $firstRow=$this.closest('table').find('tr:first');
    var $newRow = $firstRow.clone();
    $newRow.find(':input').prop('checked', false);
    $newRow.insertAfter($firstRow);
});

演示。

更新：或者也许这个或这个。