Dynamic HTML with Javascript

Dynamic HTML with Javascript.

Aim

Our aim was to create a dynamic HTML webpage with Javascript.

Description:

We were given an HTML page that had a table created and designed with CSS style sheet. There were menus and editors created in DIV tags but were made invisible and had an absolute position which means that their position is not affected by the position of the parent element/tag. Some ONCLICK events were given to some of the HTML elements that would the functions in the script to perform some changes to the current or original HTML page.

Objectives

Our objective was to let the table respond to the onclick event by showing a popup menu or make a popup menu visible. Again the popup menu should appear at the position of the mouse click. Also the row that was clicked should be highlighted. It should be possible to add, edit and rows of the table that has been created. Again, when you click on edit in the popup menu, the contents of the row that was clicked must appear in the edit row text fields.

Implementation

The first function that is called when the page registers a click is the showPopupMenu(obj). This function shows the popup menu that gives the user the option of either edit, add, delete and a cancel option.

deleteRow()

The delete function just calls an inbuilt function called deleteRow with the index as arguement. This removes the specified row from the HTML.

addRow()

The addRow() function adds a row at the end of the last row. This is done getting the total number number of rows in the table so that the new row could be added after the last row. After the row is added, cells for row are created. Moreover, since the rows should have an onclick event, you set the attribute for the new Row that is created. Again, I added a code that would alternate the background colors of the rows switching between blue and white. Since by default all the even numbers were blue, I calculated for the modulus of the row index by 2 and when the remainder is zero, the background becomes zero. The problem with this is that, when a row is deleted, the colours of the rows mess up. Lastly what I did was to make the browser that the addRow() function has been called by changing the byAdd Boolean variable to true. The addRow() then calls the showPopupEditor().

showPopupEditor()

This function basically makes the <div> that has the editor for the rows visible. The editor will have as default content the information on the current row that is clicked. In a situation where there is not current row clicked ie the add function was called first by the testAddRow link, then there are no values in the text fields. In this function, it checks which function called it and therefore determine whether to add the Row at the end of the table or to modify the content of an existing row when save link is clicked. After the save click link is clicked, the <div> becomes invisible.

SavePopupEditor()

This function actually does the adding or editing of the cells of the table. This function works with information of whether the it was called by the addRow function or the user just wanted to edit the rows and cell.