Button Click in JavaScript to add a row in the table

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?

Is there any other code on the page that uses setTimeout or the like? — Explosion Pills
– 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
– 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
– Andreas Wong, Commented Feb 18, 2013 at 2:40
Have you tried w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow — BizApps
– BizApps, Commented Feb 18, 2013 at 2:47
You're probably submitting a form when you click the button, so the page refreshes. — the system
– the system, Commented Feb 18, 2013 at 3:05

Kumar · Accepted Answer · 2013-02-18 04:10:46Z

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/

answered Feb 18, 2013 at 4:10

Kumar

3552 gold badges4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

meub · Accepted Answer · 2013-02-18 02:44:58Z

1

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

answered Feb 18, 2013 at 2:44

meub

2,31817 silver badges19 bronze badges

Comments

Giles Smith · Accepted Answer · 2013-02-18 03:42:34Z

1

Without seeing your mark up it could be as the system's comment 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.

answered Feb 18, 2013 at 3:42

Giles Smith

1,97215 silver badges17 bronze badges

Comments

K. Uzair · Accepted Answer · 2016-02-19 09:27:51Z

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>

This will do nicely for you :)

answered Feb 19, 2016 at 9:27

K. Uzair

3033 silver badges16 bronze badges

Collectives™ on Stack Overflow

Button Click in JavaScript to add a row in the table

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related