jQuery and JavaScript Phrasebook

Appending Rows to a Table

Click here to view code image

var newRow = $("<tr></tr>"); var newCell = $("<td>cel1</td>"); newRow.append(newCell); $("tbody").append(newRow):

A common task when dynamically manipulating web pages is to add rows to elements in a table. To add rows to a table, you need to create a new <tr> element and then add the <td> elements. For example:

Click here to view code image

var newRow = $("<tr></tr>"); var newCell = $("<td>cel1</td>"); newRow.append(newCell); $("tbody").append(newRow):

The following example illustrates using table building using a series of arrays to populate the data. The buildTable() function selects a random item out of the arrays to be placed into the <td> elements. Figure 10.4 shows the final ...