Dynamic HTML Table Example

Dynamic HTML Table

What makes this dynamic?

The table itself is generated by JavaScript.

The table can be amended using the form hidden by the details element.

The table caption and locating id can be amended using the form.

To amend the table details, the jsondata textarea input data needs to be changed.

JSON Format

The expected JSON format for the table is an array of row objects.

Each row object should have name and age fields.

e.g.

[{"name" : "row 1 name", "age" : 20}, {"name": "row 2 name", "age" : 432}]

JavaScript Execution

You could also populate the table by calling the javascript function createTableFromJson.

This takes three arguments:

• the json
• table caption (optional)
• table id (optional)