After reading through the "Table Basics - DOM - Refer to table cells" example at mredkj.com , I modified the code for my own purposes. In the modified version, I create a hyperlink and place it in the last cell of each row that I create dynamically using DOM methods.
Everything is working well (that is, just like the original example) except for something related to the function behind my link. The link simply calls a function (called foo()) that does nothing more than execute an alert statement. The problem is that when I activate the link from one of the rows that has been created dynamically, the function executes but after I hit the "OK" button, all of the components that were created dynamically disappear. That is, it appears as though the entire page is refreshed, or something similar, to the point that all of the dynamic content is wiped out.
In addition, if I happened to retrieve any values from the last row, those values are cleared out of the text boxes as well.
Does anyone know why this happens? Is it possible for me to prevent it, and if so, how do I do that?
Below is the source code. Please take a look and feel free to reply. Thanks.
By the way, I'm running the code in Firefox 1.0.6.
================
Expand|Select|Wrap|Line Numbers
- <html>
- <head>
- <title>Test</title>
- <script type="text/javascript">
- // mredkj.com
- // 2005-11-17
- function appendRow(tblStr) {
- var tbl = document.getElementById(tblStr);
- var row = tbl.insertRow(tbl.rows.length);
- // skill select cell
- var cell0 = row.insertCell(0);
- var skillSelect = document.createElement('select');
- skillSelect.options[0] = new Option('Select a Skill', '', true, true);
- skillSelect.options[1] = new Option('Assembler','assembler', false, false);
- skillSelect.options[2] = new Option('COBOL', 'cobol', false, false);
- skillSelect.options[3] = new Option('HTML', 'html', false, false);
- skillSelect.options[4] = new Option('Java', 'java', false, false);
- skillSelect.options[5] = new Option('JavaScript', 'javascript', false, false);
- skillSelect.options[6] = new Option('JCL', 'jcl', false, false);
- cell0.appendChild(skillSelect);
- // acquired date text cell
- var cell1 = row.insertCell(1);
- var acquiredDateInput = document.createElement('input');
- acquiredDateInput.setAttribute('type', 'text');
- acquiredDateInput.setAttribute('size', '20');
- cell1.appendChild(acquiredDateInput);
- // update date text cell
- var cell2 = row.insertCell(2);
- var updateDateInput = document.createElement('input');
- acquiredDateInput.setAttribute('type', 'text');
- acquiredDateInput.setAttribute('size', '20');
- cell2.appendChild(updateDateInput);
- // skill level select cell
- var cell3 = row.insertCell(3);
- var skillLevelSelect = document.createElement('select');
- skillLevelSelect.options[0] = new Option('Select Level', '', true, true);
- skillLevelSelect.options[1] = new Option('1','1', false, false);
- skillLevelSelect.options[2] = new Option('2', '2', false, false);
- skillLevelSelect.options[3] = new Option('3', '3', false, false);
- skillLevelSelect.options[4] = new Option('4', '4', false, false);
- cell3.appendChild(skillLevelSelect);
- // skill description select cell
- var cell4 = row.insertCell(4);
- var skillDescriptionSelect = document.createElement('select');
- skillDescriptionSelect.options[0] = new Option('Select Description', '', true, true);
- skillDescriptionSelect.options[1] = new Option('Unfamiliar','1', false, false);
- skillDescriptionSelect.options[2] = new Option('Familiar', '2', false, false);
- skillDescriptionSelect.options[3] = new Option('Experienced', '3', false, false);
- skillDescriptionSelect.options[4] = new Option('Seasoned', '4', false, false);
- cell4.appendChild(skillDescriptionSelect);
- // remove link cell
- var cell5 = row.insertCell(5);
- var removeLink = document.createElement('a');
- var text = 'remove';
- var textNode = document.createTextNode(text);
- removeLink.setAttribute('href', '');
- removeLink.addEventListener('click', foo, false);
- removeLink.appendChild(textNode);
- cell5.appendChild(removeLink);
- }
- function deleteLastRow(tblName) {
- var tbl = document.getElementById(tblName);
- if (tbl.rows.length > 2) {
- tbl.deleteRow(tbl.rows.length - 1);
- }
- }
- function getCells(tblStr, o0, o1, o2, o3, o4) {
- var tbl = document.getElementById(tblStr);
- var outTxt0 = document.getElementById(o0);
- var outTxt1 = document.getElementById(o1);
- var outTxt2 = document.getElementById(o2);
- var outTxt3 = document.getElementById(o3);
- var outTxt4 = document.getElementById(o4);
- var lastRow = tbl.rows.length - 1;
- outTxt0.value = tbl.rows[lastRow].cells[0].firstChild[tbl.rows[lastRow].cells[0].firstChild.selectedIndex].text;
- outTxt1.value = tbl.rows[lastRow].cells[1].firstChild.value;
- outTxt2.value = tbl.rows[lastRow].cells[2].firstChild.value;
- outTxt3.value = tbl.rows[lastRow].cells[3].firstChild[tbl.rows[lastRow].cells[3].firstChild.selectedIndex].text;
- outTxt4.value = tbl.rows[lastRow].cells[4].firstChild[tbl.rows[lastRow].cells[4].firstChild.selectedIndex].text;
- }
- function foo() {
- alert("foo");
- }
- </script>
- <body>
- <h1>Add Skill</h1>
- <form>
- <p>
- <input type="button" value="Add" onclick="appendRow('tblBasic2');" />
- <input type="button" value="Delete Last" onclick="deleteLastRow('tblBasic2');" />
- <input type="reset" value="Reset" />
- </p>
- <table border="1" id="tblBasic2">
- <tr>
- <th>Skill Name</th>
- <th>Acquired Date</th>
- <th>Update Date</th>
- <th>Experience Level</th>
- <th>Description</th>
- <th> </th>
- </tr>
- <tr>
- <td><select>
- <option value="" selected>Select a Skill</option>
- <option value="assembler">Assembler</option>
- <option value="cobol">COBOL</option>
- <option value="html">HTML</option>
- <option value="java">Java</option>
- <option value="javascript">JavaScript</option>
- <option value="jcl">JCL</option>
- </select></td>
- <td><input type="text" id="addSkillAcquiredDateInput" size="20" value="" /></td>
- <td><input type="text" id="addSkillUpdateDateInput" size="20" value="" /></td>
- <td><select>
- <option value="" selected>Select Level</option>
- <option value="1">1</option>
- <option value="2">2</option>
- <option value="3">3</option>
- <option value="4">4</option>
- </select></td>
- <td><select>
- <option value="" selected>Select Description</option>
- <option value="1">Unfamiliar</option>
- <option value="2">Familiar</option>
- <option value="3">Experienced</option>
- <option value="4">Seasoned</option>
- </select></td>
- <td><a href="" onclick="foo();">remove</a></td>
- </tr>
- </table>
- <p>
- <input type="button" value="Get Cells From The Last Row" onclick="getCells('tblBasic2', 'txt0', 'txt1', 'txt2', 'txt3', 'txt4');" />
- </p>
- <p>
- <label>Last Row Column 0
- <input type="text" id="txt0" size="20" /></label>
- </p>
- <p>
- <label>Last Row Column 1
- <input type="text" id="txt1" size="20" /></label>
- </p>
- <p>
- <label>Last Row Column 2
- <input type="text" id="txt2" size="20" /></label>
- </p>
- <p>
- <label>Last Row Column 3
- <input type="text" id="txt3" size="20" /></label>
- </p>
- <p>
- <label>Last Row Column 4
- <input type="text" id="txt4" size="20" /></label>
- </p>
- </form>
- </body>
- </html>