Hi guys,
I'm trying to work my way up to being a novice in Javascript but I'm not there quite yet.
My problem is that I want to create a form in which multiple form fields can be duplicated/deleted upon clicking a button. I have some javascript here that does exactly that, but it will only do it for one table row. This creates a problem since the form I want to duplicate would contain multiple rows.
I've tried containing everything in a nested table within the duplicatable row. That actually works, but it disables the delete function. Same goes for using a div.
Here's the Javascript:
And here's the html:Code:function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i<colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; case "select-one": newcell.childNodes[0].selectedIndex = 0; break; } } } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=0; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { if(rowCount <= 1) { alert("Cannot delete all the vehicles."); break; } table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } }
I've been driving myself nuts with this all day. Can anyone help me out?Code:<table id="dataTable" width="760px" border="0" cellpadding="5" bgcolor="#eeeeee"> <tr> <td><input type="checkbox" name="chk"/></td> <td> <select name="Year"> <option value="choose">Choose Year</option> </select> </td> <td> <select name="Make"> <option value="choose">Choose Division</option> </select> </td> <td> <select name="Model"> <option value="choose">Choose Model</option> </select> </td> <td> <select name="Body"> <option value="choose">Choose Body</option> </select> </td> <td> <select name="Trim"> <option value="choose">Choose Trim</option> </select> </td> </tr> <tr> <td> What about me? </td> </tr> </table>
Thanks for checking it out.



Reply With Quote

Bookmarks