Ok, I've been playing around with this code and I'm stumped I've used: Add rows and delete specific rows dynamically from an HTML table from mredkj.com here is test.php: <html> <head> <script type="text/javascript" src="javascripts/test.js"></script> </head> <body> <form action="" method="get" name="form0"> <p> <input type="button" value="Add" onclick="addRowToTable();" /> <input type="button" value="Insert [I]" onclick="insertRowToTable();" /> <input type="button" value="Delete [D]" onclick="deleteChecked();" /> <input type="button" value="Submit" onclick="openInNewWindow(this.form);" /> </p> <table border="0" cellspacing="0" id="tblSample"> <thead> <tr> <th colspan="5">Sample table</th> </tr> <tr> <th>#</th><th>Input Text</th><th>Add</th><th>Delete</th><th>D</th><th>I</th> </tr> </thead> <tbody></tbody> </table> <input type="text" name="SUM" value="0" onfocus="if(this.value=='0')this.value='';" onblur="if(this.value=='')this.value='0';" readonly size="4"> </form> <a href="javascript:if (typeof(window.document.body.outerHTML) != 'undefined'){'<xmp>'+window.document.body.outerHTML+'</xmp>'} else if (typeof(document.getElementsByTagName('html')[0].innerHTML) != 'undefined'){ '<xmp>'+document.getElementsByTagName('html')[0].innerHTML+'</xmp>'} else if (typeof(window.document.documentElement.outerHTML) != 'undefined'){ '<xmp>'+window.document.documentElement.outerHTML+'</xmp>'} else { alert('Your browser does not support this.') }">View Source!</a> </body> </html> Code (markup): and here is test.js: var a = 'a'; // this is being set via script var RADIO_NAME = 'totallyrad'; // this is being set via script var TABLE_NAME = 'tblSample'; // this should be named in the HTML var ROW_BASE = 1; // first number (for display) var hasLoaded = false; window.onload=fillInRows; function fillInRows() { hasLoaded = true; addRowToTable(); addRowToTable(); } // CONFIG: // myRowObject is an object for storing information about the table rows function myRowObject(one, two, three, four) { this.one = one; // text object this.two = two; // input text object this.three = three; // input checkbox object this.four = four; // input radio object } /* * insertRowToTable * Insert and reorder */ function insertRowToTable() { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var rowToInsertAt = tbl.tBodies[0].rows.length; for (var i=0; i<tbl.tBodies[0].rows.length; i++) { if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.four.getAttribute('type') == 'radio' && tbl.tBodies[0].rows[i].myRow.four.checked) { rowToInsertAt = i; break; } } addRowToTable(rowToInsertAt); reorderRows(tbl, rowToInsertAt); } } function Calc(){ var frm = document.form0; var total=0; if (!frm.ary) frm.ary=[frm.a1_2]; for (var xyz=0;xyz<frm.ary.length;xyz++){ if (frm.ary[xyz].value.length>0&&!isNaN(frm.ary[xyz].value)) total+=frm.ary[xyz].value*1; } frm.SUM.value=total; } /* * addRowToTable * Inserts at row 'num', or appends to the end if no arguments are passed in. Don't pass in empty strings. */ function addRowToTable(num) { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var nextRow = tbl.tBodies[0].rows.length; var iteration = nextRow + ROW_BASE; if (num == null) { num = nextRow; } else { iteration = num + ROW_BASE; } // add the row var row = tbl.tBodies[0].insertRow(num); // CONFIG: requires classes named classy0 and classy1 row.className = 'classy' + (iteration % 2); // CONFIG: This whole section can be configured // cell 0 - text var cell0 = row.insertCell(0); var textNode = document.createTextNode(iteration); cell0.appendChild(textNode); // cell 1 - input text var cell1 = row.insertCell(1); var txtInp1 = document.createElement('input'); txtInp1.setAttribute('type', 'text'); txtInp1.setAttribute('name', 'a' + iteration + '_1'); txtInp1.setAttribute('size', '40'); txtInp1.setAttribute('value', iteration); // iteration included for debug purposes cell1.appendChild(txtInp1); var cell1a = row.insertCell(2); var txtInp2 = document.createElement('input'); txtInp2.type = 'text'; txtInp2.value = ''; txtInp2.setAttribute('name', 'a' + iteration + '_2'); txtInp2.size = 4; txtInp2.setAttribute("onChange", "Calc()"); txtInp2.setAttribute("onBlur", "Calc()"); txtInp2.setAttribute("onFocus", "Calc()"); txtInp2.setAttribute("onClick", "Calc()"); txtInp2.setAttribute("onKeydown", "Calc()"); txtInp2.setAttribute("onKeyup", "Calc()"); cell1a.appendChild(txtInp2); // cell 2 - input button var cell2 = row.insertCell(3); var btnEl = document.createElement('input'); btnEl.setAttribute('type', 'button'); btnEl.setAttribute('value', 'Delete'); btnEl.onclick = function () {deleteCurrentRow(this)}; cell2.appendChild(btnEl); // cell 3 - input checkbox var cell3 = row.insertCell(4); var cbEl = document.createElement('input'); cbEl.setAttribute('type', 'checkbox'); cell3.appendChild(cbEl); // cell 4 - input radio var cell4 = row.insertCell(5); var raEl; try { raEl = document.createElement('<input type="radio" name="' + RADIO_NAME + '" value="' + iteration + '">'); var failIfNotIE = raEl.name.length; } catch(ex) { raEl = document.createElement('input'); raEl.setAttribute('type', 'radio'); raEl.setAttribute('name', RADIO_NAME); raEl.setAttribute('value', iteration); } cell4.appendChild(raEl); // Pass in the elements you want to reference later // Store the myRow object in each row row.myRow = new myRowObject(textNode, txtInp1, txtInp2, cbEl, raEl); } } // CONFIG: this entire function is affected by myRowObject settings // If there isn't a checkbox in your row, then this function can't be used. function deleteChecked() { if (hasLoaded) { var checkedObjArray = new Array(); var cCount = 0; var tbl = document.getElementById(TABLE_NAME); for (var i=0; i<tbl.tBodies[0].rows.length; i++) { if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.three.getAttribute('type') == 'checkbox' && tbl.tBodies[0].rows[i].myRow.three.checked) { checkedObjArray[cCount] = tbl.tBodies[0].rows[i]; cCount++; } } if (checkedObjArray.length > 0) { var rIndex = checkedObjArray[0].sectionRowIndex; deleteRows(checkedObjArray); reorderRows(tbl, rIndex); } } } // If there isn't an element with an onclick event in your row, then this function can't be used. function deleteCurrentRow(obj) { if (hasLoaded) { var delRow = obj.parentNode.parentNode; var tbl = delRow.parentNode.parentNode; var rIndex = delRow.sectionRowIndex; var rowArray = new Array(delRow); deleteRows(rowArray); reorderRows(tbl, rIndex); } } function reorderRows(tbl, startingIndex) { if (hasLoaded) { if (tbl.tBodies[0].rows[startingIndex]) { var count = startingIndex + ROW_BASE; for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) { // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.one.data = count; // text // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.two.name = a + count; // input text // CONFIG: next line is affected by myRowObject settings var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); // for debug purposes tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0]; // for debug purposes // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio // CONFIG: requires class named classy0 and classy1 tbl.tBodies[0].rows[i].className = 'classy' + (count % 2); count++; } } } } function deleteRows(rowObjArray) { if (hasLoaded) { for (var i=0; i<rowObjArray.length; i++) { var rIndex = rowObjArray[i].sectionRowIndex; rowObjArray[i].parentNode.deleteRow(rIndex); } } } function openInNewWindow(frm) { // open a blank window var aWindow = window.open('', 'TableAddRow2NewWindow', 'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400'); // set the target to the blank window frm.target = 'TableAddRow2NewWindow'; // submit frm.submit(); } Code (markup): Its the Calc() script thats not working, I want to add up whatever is in the second textbox column as more lines are added and to total in the SUM textbox. Anyone care to shed some light on this one....Im stumped
You renamed the relevant cells 'a'+iteration+'_2' so frm.a1_2 only refers to the first row, so array has only one element. I've uses parseInt() to make sure that any number in text form is converted to a number in number form here's my solution which seems to work ok. function Calc(){ var frm = document.form0; var tbl = document.getElementById(TABLE_NAME); var total=0; for (var xyz=0;xyz<tbl.tBodies[0].rows.length;xyz++){ cellval=tbl.tBodies[0].rows[xyz].cells[2].childNodes[0].value; if (cellval.length>0&&!isNaN(parseInt(cellval))) total+=parseInt(cellval); } frm.SUM.value=total; }
Ok, next would be a button to reset only the newly created fields back to default, not affecting anything outside <table id="tblSample"> I can reset SUM by function ReSet() { window.document.form0.SUM.value=''; } <input type="button" value="Reset" onClick="ReSet()"> Code (markup): but not any other fields that were created in th <tbody></tbody> tags....They wont reset.... is there somthing else I need to do?