javascript - How to add table columns and rows dynamically with the correct number of cells? -

i'm looking dynamically add rows , columns table, , i've gotten pretty far researching how jquery. i've successfully, been able add columns have correct number of rows , remove entire row. have not been able add row correct number of columns , remove entire column (all rows gone!).

here script have far:

jquery(window).load( function($) {  // add column function jquery('#ldrm-add-col').click(function() {     jquery('.ldrm thead tr').append('<th class="rb-top">test</th>');     jquery('.ldrm tr:gt(0)').append('<td>col</td>');     console.log('autocomplete'); });  // add row function jquery('#ldrm-add-row').click(function() {     jquery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">remove</span></td><td class="rb-left">test</td><td>test</td></tr>');     console.log('autocomplete'); });  // remove row function jquery(document).on('click','td.remove-row .btn', function() {     jquery(this).closest('tr').remove(); });  }); 

so, if start 3 columns , click add row, works fine right because adds 3 rows. however, if click add column , appends 4th column , click add row, there cell missing because script doesn't know column added.

http://jsfiddle.net/2kws0alx/

any suggestions on how can improve add row script take account dynamically added columns?

for add row function need account how many columns currently in table. did quick , dirty iife show mean.

http://jsfiddle.net/2kws0alx/1/

// add row function jquery('#ldrm-add-row').click(function() {     // -2 account 2 empty th's @ top left     var numofcol = $('thead th').length - 2;      jquery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">remove</span></td><td class="rb-left">test</td>' + (function() { var str = ''; for(var i=0; < numofcol; i++) { str += '<td>test</td>'; } return str; })());     console.log('autocomplete'); });