Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Error with creating new cells/rows in a table.

Reply
Thread Tools

Error with creating new cells/rows in a table.

 
 
BethH
Guest
Posts: n/a
 
      10-05-2007
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?

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      10-05-2007
On Oct 5, 12:28 pm, BethH <(E-Mail Removed)> wrote:
> 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>


--
Rob

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
SimpleXMLRPCServer and creating a new object on for each new clientrequest. Jelle Smet Python 5 05-09-2009 08:47 PM
SimpleXMLRPCServer and creating a new object on for each new clientrequest. J Python 0 05-06-2009 09:27 PM
Javascript new-new-new-new-newbee weblinkunlimited@gmail.com Javascript 2 03-11-2008 01:15 AM
"Error Creating Control" when creating a custom control (Design Time). Can't see tooltip message. Ravi Ambros Wallau ASP .Net Web Controls 0 06-01-2005 02:36 PM
"Error Creating Control" when creating a custom control (Design Time). Can't see tooltip message. Ravi Ambros Wallau ASP .Net 0 06-01-2005 02:36 PM



Advertisments