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:
Code:
<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>
and here is test.js:
Code:
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();
}
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
Before you post, read our: 
