VirtualMV/JavaScript/Case Study: Forms/Table Object/Content

Some advanced JavaScript Techniques - using the Table Object
The objective of this part of the case study is to introduce some tricky coding, so you can explore some more advanced features in JavaScript. Normally tabular data would be handled on the Server, with the Server side code (e.g. PHP or ASP.NET) interacting with a database.



To begin we need to have the input fields we want to add to the table and a button that will add the fields to the table, so this is created in the HTML code

Next we need to have a table to add the fields to

Now we need to add the code to transfer the data to the table and write the JS function for the Add Item button.

Refer to the notes on the Table Object for an explanation of how this works.

Test this in your browser and get it working before you continue.

The final part of the puzzle is to get the totals transferred from the table to the Totals fields when fnCheckData is called.

This is a sneaky bit of code as:
 * 1) it works out how many rows the table has varMyTable.rows.length
 * 2) Loops through the rows for (intI = 1; intI < varRows; intI++)
 * 3) Grabs the contents of the 3rd column ( cells[2].innerHTML ) remember JS numbers arrays from 0, and parseInt converts the text to a number.
 * 4) Add the number found to either the DVD total or the BluRay total.

Note: put this code before the totals (where we put the test code in the previous example)