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?

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?

• javascript
• jquery
• html

Share Improve this question Follow asked Feb 18, 2013 at 2:33 user1460819user1460819 2,11255 gold badges2626 silver badges3636 bronze badges 5

• Is there any other code on the page that uses setTimeout or the like? – Explosion Pills Commented Feb 18, 2013 at 2:36
• Do you have any other Javascript that could be conflicting with this? On it's own it appears to work as intended (Example) – Rion Williams Commented Feb 18, 2013 at 2:37
• Probably nothing to do with your problem, but why not use $('#my_table') and $('#my_table').append()? – Andreas Wong Commented Feb 18, 2013 at 2:40
• Have you tried w3schools./jsref/tryit.asp?filename=tryjsref_table_insertrow – BizApps Commented Feb 18, 2013 at 2:47
• 1 You're probably submitting a form when you click the button, so the page refreshes. – the system Commented Feb 18, 2013 at 3:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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/yUfhL/

If you're going to use jQuery for the click event you might as well use it consistently in your code.

Give this a whirl: jsfiddle

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

Without seeing your mark up it could be as the system's ment suggested that the form is submitting and the page is refreshing.

If this is the case, the simple solution is to use the event.preventDefault() in your handler:

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

});

You ca read more about the preventDefault in the jquery docs

As per other answers, if you have access to jquery, you can tidy up the method by using it throughout the code.

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

This will do nicely for you :)