0

私の仕事は、テーブルとボタンのあるページを作成することです。ユーザーがボタンを押すと、1行がテーブルに追加されます。したがって、HTMLページ（<button id="my_button">Bla-bla</button>）にボタンとテーブル（ <table id="my_table">）があります。そして、JavaScript用の別のファイルがあります。そのファイルに私は書いた：

$(function() {
    $(my_button).click(function(){            
       tbl = document.getElementById("my_table");
       row = tbl.insertRow(0);      
       var newCell = row.insertCell(0);
       newCell.height=300;
       newCell.innerHTML="Some New Text";
    });
});

しかし、問題があります。ボタンを押すと、行が数ミリ秒追加され、その後消えて、新しい行のないテーブルが再び表示されます。問題は何ですか？どうすれば解決できますか？

4

4 に答える 4

1

マークアップが表示されない場合は、システムのコメントがフォームが送信中であり、ページが更新されていることを示唆している可能性があります。

この場合、簡単な解決策は、ハンドラーでevent.preventDefault（）を使用することです。

$(function() {
    $(my_button).click(function(){ 
        event.preventDefault();           
        tbl = document.getElementById("my_table");
        row = tbl.insertRow(0);      
        var newCell = row.insertCell(0);
        newCell.height=300;
        newCell.innerHTML="Some New Text";
   });

}）;

あなたはjqueryドキュメントでpreventDefaultについてもっと読むことができます

他の回答と同様に、jqueryにアクセスできる場合は、コード全体でメソッドを使用してメソッドを整理できます。

于 2013-02-18T03:42:34.087 に答える
1

ここに小さな例があります

htmlコード

<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>

jqueryコード

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

このコードを操作するには、このリンクを参照してください http://jsfiddle.net/yUfhL/

于 2013-02-18T04:10:46.090 に答える
1

クリック イベントに jQuery を使用する場合は、コード内で一貫して使用することもできます。

試してみてください: jsfiddle

$("#my_button").click(function(){            
    $("#my_table").append('<tr style="height:300px"><td>Some New text</td></tr>');
});
于 2013-02-18T02:44:58.520 に答える
0 
<script type="text/javascript"> 
          $(document).ready(function(){        
               $(document).on("click","td.addNewButton",function(e) {   
                     var row = $(this).parent().parent().children().index($(this).parent());   
                     var html = $('#myTable tbody tr:eq('+row+')').html();   
                     $('#myTable tbody tr:eq('+row+')').after('<tr>'+html+'</tr>');  
               }); 
         }); 
    </script>

これはあなたにとってうまくいくでしょう:)

于 2016-02-19T09:27:51.597 に答える