Add new row in html dynamically using jQuery

Question

I need to create one HTML table using JSON data. need to add one button on each row .. (add row).

add_row button functionality

need to copy the content of the above row and create a new row below that row.

also, the button can add multiple rows at a time

I think this is a little challenging task; please help me.

Possible duplicate of How do I add an extra html table row upon button click using jQuery? — rkeet
– rkeet, Commented May 11, 2017 at 7:39

FrostyOnion · Accepted Answer · 2017-05-11 04:59:03Z

0

Not really sure what you are after sorry, but the following might help you out.

$(document).ready(function () {
   $('#my_button').click( function (e) {
      var dynamic_html = "<tr>whatever data you want (including raw html) </tr>";
        jQuery('#my_table').append(dynamic_html);
   });
}

Inside the "dynamic_html" you can put any text/html that you want. You can add in your table cells and the button that you are talking about. When being appended it html tags will be read as html and add to your page.

answered May 11, 2017 at 4:59

FrostyOnion

1,0069 silver badges12 bronze badges

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

2 Comments

prasad Over a year ago

how should me handle copy tha data of current row to newly creted row

FrostyOnion Over a year ago

Can I see the table html please

Collectives™ on Stack Overflow

Add new row in html dynamically using jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related