0

我的任务是制作一个带有表格和按钮的页面。当用户按下按钮时，表格中会添加一行。所以，我的 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

如果您打算将 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 回答
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 回答
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 回答