javascript - JavaScript 中的按钮单击可在表中添加一行

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

这是一个小例子

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/