Dynamic Table

[H.c.m. Raaijmaakers]

Hi,

The user can create a dynamic table.
In every row are 5 input text boxes.

If the second text box gets a onblur event then the value of the third box
needs to become the value of the first text box minus the value of the
secons text box.

I have tried the next statement:
document.write(document.getelementbyid('table').rows.cells.item[j].firstchild.value);

the output is: undefined.

Can someone help me?

Thanx!

Greetz Ralph

 

[Evan]

I'm guessing that this statement comes inside a nested for loop? make
sure your values of i and j are valid. Maybe give us some more
information and post some more code so we can better help you.

Good luck!
Evan

 

[RobG]

H.c.m. Raaijmaakers said on 29/03/2006 3:34 AM AEST:

Hi,

The user can create a dynamic table.
In every row are 5 input text boxes.

If the second text box gets a onblur event then the value of the third box
needs to become the value of the first text box minus the value of the
secons text box.

I have tried the next statement:
document.write(document.getelementbyid('table').rows.cells.item[j].firstchild.value);

There are a number of errors here:

1.
If the document is closed (i.e. has finished loading), document.write()
will call document.open() and a new document will be created that
replaces the old one. Use document.write() while the document is
loading, but not afterward unless you intend to completely replace the
content of the document.

I don't think that's what you want to do, it seems more like you want to
assign a value to the 'value' property of a particular input element.


2.
There is no 'getelementbyid' method, you are looking for
'getElementById' (JavaScript is case sensitive).

I'll guess that 'table' is the actual ID of the table, e.g.

<table id="table">


3.
item is a *method* of the HTMLCollection interface (inherited from
interface nodeList) (even though it looks like it should be a property),
so you can use cells.item(j). However, it is much simpler and more
common to use cells[j].


4.
Using 'firstChild' is problematic: in some browsers, if there is any
whitespace between the opening <td> tag and <input> tag, a #text node
will be inserted in the DOM. The firstChild of the TD will be the text
node, not the input.

If the inputs are in a form, the DOM 0 forms methods seem much simpler.
For example:

<form action="">
<table><tr>
<td><input type="text" name="t0" value="4">
<td><input type="text" name="t1" value="6">
<td><input type="text" name="t2">
<td><input type="button" value="Add 'em" onclick="
var f = this.form;
f.t2.value = +f.t0.value + +f.t1.value;
">
</table>
</form>


5. It is normal to do feature detection and allow for cases where errors
may arise. Your code, if corrected to 'work', can fail at any one of a
number of points with no possible recovery. Learn to write robust code
- the above example isn't intended for that purpose, it's just an
example to help you get to the finished product.

Greetz Ralph

Or Raaij