Dynamic Table HTML Generator - Instructions

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)

Suggested Exercises

Automating

• Automate the creation of a new table
• Can you automate the copy and paste?

Exploratory Testing Ideas

• What JSON can be used to create a table?
• Interact with the page using the JavaScript from the console.
• What if there are missing or duplicate fields in the JSON?
• Is the copied HTML valid? Try different ways and tools to validate it.
• There are functional bugs in the table implementation, find them.