0

ユーザーが独自の項目を追加できるチェックリストを作成しようとしています。

これは私の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>

ただ、何の反応もありません..

4

1 に答える 1

0

これはあなたが必要とするものですか？

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 を 2 回使用できないため、 に変更id="checkbox65"したことに注意してください。class="checkbox65"また、新しい要素のために変更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);
});

デモ。

更新:または、これまたはこれ.

于 2012-12-04T13:23:52.207 に答える