slayeroffice | code | insert row

The above is a standard table of data - clicking the "More" button will insert a new row in the table using insertRow and then appending a <td> element as a child of the resulting row.

Upon page load assignRowIndex() is called which loops over the rows in the table, assigning each a bogus attribute named "xindex" with an incrementing value to denote their index in the <tr> object collection (we also zebra stripe the rows here). Following that the onclick events are assigned to the <a> elements in the table to call the function that will insert the new row.

When the <a> element is clicked, we pass a reference of it (this) as well as the "xindex" attribute value of the <tr> it descends from to the createNewRow function.

The created rows always have an id of "tmpRow" and only one exists at a time, so the function first checks to see if one exists. If it does, we grab another bogus attribute from tmpRow called "tmpIndex" which tells us which existing hard-coded row the new row is under. If that index is less than the index being passed in, we subtract 1 from the passed in nodeIndex to compensate for the inserted row taking up an index in the rows collection. We then remove the previously inserted row from the DOM.

If the nodeIndex passed in is the same as the value of tmpIndex we know that the user has clicked on the same <a> and we only need to change the textNode value of the <a> element.

Without using innerHTML, this is accomplised by removing all text nodes that are children of that element and then creating a new one with a value of "More". We then re-assign row indexes by calling assignRowIndex again. This function should be called everytime a row is added or removed to make certain the indexes are correct. Following that we return out of the function as there is nothing left for us to do.

If no row had beed inserted resetButtonText() is called next which is just a catch-all function to make sure the buttons all say what they are supposed to say, and then the <a> that was clicked is made to say "Close".

Finally the new row is created with insertRow, the <td> is appended to it as well as the text node and we're done.

Javascript Source
CSS

Data One	Data Two	Data Three	More
Data One	Data Two	Data Three	More
Data One	Data Two	Data Three	More
Data One	Data Two	Data Three	More