Menu
In my attempt to understand the workings of the code at: [url]http://www.webdeveloper.com/forum/showthread.php?t=238921
I modified it a bit.
My question is: What am i doing wrong with the ‘testContents()’ function?
The rows of the table see to be added to the display, but I can not confirm that fact with the test function.
[code]
<html>
<head>
<title>New Table Rows</title>
<script type=”text/javascript”>
// From: http://www.webdeveloper.com/forum/showthread.php?t=238921
function addCell(newElemRow,newElemCell,ElemTag,ElemType,ElemName,ElemID,ElemSize) {
var newCell = newElemRow.insertCell(newElemCell);
var el = document.createElement(ElemTag);
el.type = ElemType;
el.name = ElemName;
el.id = ElemID;
el.size = ElemSize;
newCell.appendChild(el);
}
function addRow() {
var tbl = document.getElementById(‘formtbl’);
var iteration = tbl.tBodies[0].rows.length+1;
newRow = tbl.tBodies[0].insertRow(-1);
addCell(newRow,0,’input’,’text’,’pageNo’,’pageNo’+iteration,5);
addCell(newRow,1,’input’,’text’,’prodNo’,’prodNo’+iteration,6);
addCell(newRow,2,’input’,’text’,’item’,’item’+iteration,5);
addCell(newRow,3,’input’,’text’,’desc’,’desc’+iteration,60);
addCell(newRow,4,’input’,’text’,’qty’,’qty’+iteration,2);
addCell(newRow,5,’input’,’text’,’amt’,’amt’+iteration,6);
}
function testContents() {
var str = ”;
var obj = document.getElementById(‘formtbl’);
var sel = obj.getElementsByTagName(‘input’);
for (var i=0; i<sel.length; i++) {
str += sel.name +’ : ‘+ sel.id +'<br>’;
}
document.getElementById(‘show’).innerHTML = str;
}
</script>
</head>
<body>
<div id=”tbl”>
<table border=”1″ id=’formtbl’>
<tr>
<th>Page No.</th>
<th>Product No.</th>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</table>
</div>
<p>
<button onclick=”addRow()”>Add Row</button>
<button onclick=”testContents()”>Test</button>
<div id=”show”></div>
</body>
</html>