Question

19

Button Click in JavaScript to add a row in the table

rated 0 times [ 21] [ 2] / answers: 1 / hits: 17368 / 11 Years ago, mon, february 18, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kurtisl

Add To Favorites

Follow

Total Points: 559

Total Questions: 110

Total Answers: 97

Location: Tokelau

Member since Sun, May 7, 2023

1 Year ago

answered 11 Years ago harleyaleenag · Accepted Answer

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/