You can't beat a table for presenting collections of data. Graphs may be
better at showing the relationships among values and the way they change
over time, but tables are the best way of showing raw numbers.
The problem with tables in Web pages is that the HTML, while not
difficult to understand, can be a bit tedious. If you're writing an
application in which your users are to be given the ability to change
the quantity and type of information that's shown, you face the prospect
of lots of requests coming into your Web server and lots of server-side
processing work as altered tables are generated in accordance with
users' wishes.
Fortunately, JavaScript provides us with some methods that alter tables
in the rendered document. Have a look at this:
function insertRow(where, what)
{
var newTableCell
var interestingTable = document.getElementById("tableToBeModified");
var newRow = interestingTable.insertRow(where);
newTableCell = newRow.insertCell(0);
newTableCell.innerHTML = what;
}
That code specifies the addition of a one-cell row to the table
identified in HTML as tableToBeModified. First, the table is "grabbed"
with the getElementById() statement. Then, the HTML for a new row (the
<TR> tags) is added by the insertRow() method. The insertion of a cell
is handled similarly, with the insertCell() method. Finally, the cell's
contents are added by assigning the parameter what to the innerHTML
property of the newTableCell object.
