Question

My task is to make a page with a table and a button. When the user presses a button, one row is added to the table.
So, I have a button on my html page ( <button id="my_button">Bla-bla</button> ),
and a table ( <table id="my_table"> ). And I have a separate file for JavaScript. In that file I wrote:

$(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";
    });
});

But there is a problem: when I press the button, the row is added for several milliseconds, then it vanishes and I see the table without the new row again.
What is the problem and how can I solve it?

Answer 1

here a small example

html code

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

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

see this link for working this code
http://jsfiddle.net/yUfhL/