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);
});

DEMO

更新或者this one或this one。

将新项目添加到核对清单

1 个答案:

这是你需要的吗？

HTML

JS