0

クリック時に動的に行を追加する次のコードがあります。

<script language="javascript">
jQuery(function(){
    var counter = 1;
    jQuery('a.add-author').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = jQuery('<tr><td><input type="text" name="first_name' +
            counter + '"/></td><td><input type="text" name="last_name' +
            counter + '"/></td></tr>');
        jQuery('table.authors-list').append(newRow);
    });
});
</script>
<table class="authors-list">
<tr>
    <td>author's first name</td><td>author's last name</td>
</tr>
<tr>
    <td>
        <input type="text" name="first_name" />
    </td>
    <td>
        <input type="text" name="last_name" />
    </td>
</tr>
</table>
<a href="#" title="" class="add-author">Add Author</a>

コードはjsFiddleで正常に動作しますが、メモ帳にコピーして WAMP サーバーから実行しようとすると、動作しません。

別の質問: クリック時に行を削除するために、各行の横に行削除ボタンを追加するにはどうすればよいですか?

4

4 に答える 4

3

JQuery を HTML ファイルに正しくロードしましたか? JQuery はすでに JSFild にロードされている可能性がありますが、プロジェクトにない可能性があります。

于 2013-06-26T14:12:49.903 に答える
3

2 番目の質問への回答 (コードを少し変更):

$(function() {

    var $table = $('table.authors-list'),
        counter = 1;

    $('a.add-author').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = 
            '<tr>' + 
                '<td><input type="text" name="first_name' + counter + '"/></td>' +
                '<td><input type="text" name="last_name' + counter + '"/></td>' +
                '<td><a class="remove">remove</a></td>'
            '</tr>';
        $table.append(newRow);
    });

    // Remove rows on click
    $table.on('click', '.remove', function() {
        $(this).closest('tr').remove();
    });
});

http://jsfiddle.net/YsgEL/

したがって、行を削除する最善の方法は、いくつかのリンクでクリック イベントをリッスンしremove、対応する親行を削除することです。

于 2013-06-26T14:25:05.047 に答える
1

<script>タグの前に次のコード行を追加します。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

これにより、jQuery ライブラリが Web ページに読み込まれ、jQueryまたは$オブジェクトのすべての関数とプロパティを使用できるようになります。

于 2013-06-26T14:17:44.297 に答える
0

最初の質問への回答: 詳細情報を提供してください... この問題は、いくつかの理由で発生する可能性があります。

2 番目の質問への回答: 「remove_button」クラスの削除ボタンを「newRow」という変数に追加し、それに ID を追加できます (つまりid="remove_button_" + counter)。

削除ボタンをクリックすると、ボタンのIDの番号を抽出する関数が呼び出され、関数を使用して同じ番号を持つ他の要素が削除されremove()ます

于 2013-06-26T14:15:49.883 に答える