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 there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);

  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);

  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;

  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);

  // select cell
  var cellRightSel = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('text zero', 'value0');
  sel.options[1] = new Option('text one', 'value1');
  cellRightSel.appendChild(sel);
}

How to translate this from DOM calls to jQuery?Can anyone give sample code .

cam · Accepted Answer · 2010-08-14 08:12:15Z

9

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.

answered Aug 14, 2010 at 8:12

cam

14.2k1 gold badge46 silver badges29 bronze badges

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

Comments

Ian Henry · Accepted Answer · 2010-08-13 18:30:13Z

2

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());

answered Aug 13, 2010 at 18:30

Ian Henry

22.4k4 gold badges53 silver badges61 bronze badges

Comments

Im0rtality · Accepted Answer · 2010-08-13 18:51:37Z

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

edited Aug 13, 2010 at 18:51

answered Aug 13, 2010 at 18:45

Im0rtality

3,5333 gold badges34 silver badges42 bronze badges

Collectives™ on Stack Overflow

Adding rows and columns to a table dynamically with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related