Error with creating new cells/rows in a table.

[BethH]

Kind of complicated. I'll try to break it down. This is some code I
did to continually add more input boxes to a table, and format them to
four input boxes a row.

This is the code in question:

var WBi = 0;
var WBTR = 1;

function AddWB(){

WBi++;

var ThisTable = document.getElementById('tblWB');
var newTR = "wb"+WBTR;
newTR = document.getElementById(newTR);

if(WBi % 4 == 0){

WBTR++;

newTR = document.createElement("tr");
newTR.id = 'wb'+WBTR;
ThisTable.appendChild(newTR);
}

var newTD = document.createElement("td");

newTR.appendChild(newTD);

newTD.innerHTML="Wellbore Purchase:<br><input type='text' name='WB"+WBi
+"'>";

}

In the page I have this:

<table width="100%" border="0"><tbody id="tblWB"><tr id="wb1">
<td><input type="button" value="Add WellBore Purchase"
onClick="AddWB();"></td></tr></tbody></table>

The page loads fine. I can click that button four times without
issues (it will create the three on the first row and one on the
second). Then it breaks, with this error:

Line: 33
Character: 1
Code: 0
Error Message: Unexpected call to method or property access.
URL: http://localhost/cmmmock/wells/edit.html

Line 33 is this one: newTR.appendChild(newTD);

I'm sure this is something stupid, but I'm just not getting it, and I
can't find a javascript debugger that does more than highlight your
code. Thanks. I know where the code is. Useless piece of fluff!
<shakes tiny fist in futile rage>

So, two questions, what am I missing here, and does anyone know of a
script debugger that's worth having?

 

[RobG]

Kind of complicated. I'll try to break it down. This is some code I
did to continually add more input boxes to a table, and format them to
four input boxes a row.

This is the code in question:

The code is pretty ugly, there are much better ways to go about this.

var WBi = 0;
var WBTR = 1;

function AddWB(){

WBi++;

var ThisTable = document.getElementById('tblWB');
var newTR = "wb"+WBTR;
newTR = document.getElementById(newTR);

if(WBi % 4 == 0){

WBTR++;

newTR = document.createElement("tr");
newTR.id = 'wb'+WBTR;
ThisTable.appendChild(newTR);

}

var newTD = document.createElement("td");

newTR.appendChild(newTD);

newTD.innerHTML="Wellbore Purchase:<br><input type='text' name='WB"+WBi
+"'>";

}

In the page I have this:

<table width="100%" border="0"><tbody id="tblWB"><tr id="wb1">
<td><input type="button" value="Add WellBore Purchase"
onClick="AddWB();"></td></tr></tbody></table>

The page loads fine. I can click that button four times without
issues (it will create the three on the first row and one on the
second). Then it breaks, with this error:

In IE, right?

Line: 33
Character: 1
Code: 0
Error Message: Unexpected call to method or property access.
URL:http://localhost/cmmmock/wells/edit.html

Line 33 is this one: newTR.appendChild(newTD);

I'm sure this is something stupid, but I'm just not getting it, and I
can't find a javascript debugger that does more than highlight your
code. Thanks. I know where the code is. Useless piece of fluff!
<shakes tiny fist in futile rage>

So, two questions, what am I missing here, and does anyone know of a
script debugger that's worth having?

Your problem is with IE - you create inputs with names that are the
same as the ID's of the table rows. IE doesn't distinguish between
names and IDs.

Anyhow, I think I know what you are trying to do, so try:


<script>
function addWB(id) {
var tblBody = document.getElementById(id);
var WBTR = tblBody.rows.length;
var row = tblBody.rows[WBTR - 1];
var cell;
if (row.cells.length == 4) {
row = tblBody.insertRow(-1);
row.id = 'wb' + WBTR;
}
var cell = row.insertCell(-1);
cell.innerHTML = 'Wellbore Purchase:<br><input ' +
'type="text" name="WB' + WBi + '">';
}
</script>

<table>
<tbody id="tblWB">
<tr id="wb1">
<td><input type="button" value="Add WellBore Purchase"
onClick="addWB('tblWB');">
</tbody>
</table>