Question

我的任务是创建一个包含表格和按钮的页面。当用户按下按钮时，会向表中添加一行。所以，我的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";
    });
});

但是有一个问题：当我按下按钮时，该行被添加了几毫秒，然后它就消失了，我再次看到没有新行的表。有什么问题，如何解决？

Answer 1

如果您要为点击事件使用jQuery，您可以在代码中始终如一地使用它。

给它一个旋转：jsfiddle

$("#my_button").click(function(){            
    $("#my_table").append('<tr style="height:300px"><td>Some New text</td></tr>');
});

Answer 2

如果没有看到你的标记，可能是因为系统的评论表明表单正在提交并且页面正在刷新。

如果是这种情况，简单的解决方案是在处理程序中使用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 docs

中详细了解preventDefault

根据其他答案，如果您有权访问jquery，则可以在整个代码中使用它来整理方法。

Answer 3

这是一个小例子

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/

Answer 4

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

这对你很好：）

按钮单击JavaScript以在表中添加行

4 个答案: