Adding rows and columns to a table dynamically with jQuery

Question

I have the following JavaScript code:

function addRowToTable()
{
  var tbl = document.getElementById(\'tblSample\');
  var lastRow = tbl.rows.length;
  // if         


        

Answer 1

The easiest way is to simply use $('#tblSample').append('<tr> ... </tr>'), manually entering the html string (if it's constant). You can also read the html from somewhere else, for more readable code:

 $('#tblSample').append($('div#blank-row-container').html());

Answer 2

Maybe something like this (but without select): http://jsfiddle.net/dVBMc/3/

UPDATE: http://jsfiddle.net/dVBMc/6/

function addRowToTable(table, cell1, cell2) {
    var row;
    row = "<tr><td>" + cell1 + "</td><td>" + cell2 + "</td></tr>";
    table.append(row);
}

Usage:

$(document).ready(function() {
    $('button').click(function() {
        addRowToTable($('table'), 'cell1 content', 'cell2 content');
    });
});

Answer 3

I would avoid using strings of HTML and keep creating DOM elements like you had before. jQuery makes this really easy:

var row = $("<tr>");
row.append( $("<td>").text("hello") );
$("#tblSample").append(row);

See http://api.jquery.com/jQuery/#jQuery2 for more info.