referencing a <tr> object

G

Gregor Rot

Hi,

if i have this code: <form><input type=text name="id1"></form> then with
javascript i can reference this with this.form.id1, how can i reference
something like this:

<table>
<tr name="id2">
..
..
</table>

?

this.id2 doesn't work

thank you,
Greg
 
M

Michael Winter

Gregor said:
if i have this code: <form><input type=text name="id1"></form> then with
javascript i can reference this with this.form.id1 [...]

That works because form controls with name and id attributes are usually
made available as properties of a FORM element. However, I think it's
preferable to use the elements collection to reference form controls:

this.form.elements.id1

The shorthand form was, in my opinion, a mistake and the elements
collection is standardised.
how can i reference something like this:

<table>
<tr name="id2">

You shouldn't be able to. Table rows, like the vast majority of
elements, do not have name attributes. They do have id attributes,
though. You can then use the getElementById method to obtain a reference:

<tr id="id2">


var row = null;

if(document.getElementById) {
row = document.getElementById('id2');
}
if(row) {
/* Now have a reference to the table row. */
}

[snip]

Hope that helps,
Mike
 
G

Gregor Rot

Michael said:
Gregor said:
if i have this code: <form><input type=text name="id1"></form> then
with javascript i can reference this with this.form.id1 [...]


That works because form controls with name and id attributes are usually
made available as properties of a FORM element. However, I think it's
preferable to use the elements collection to reference form controls:

this.form.elements.id1

The shorthand form was, in my opinion, a mistake and the elements
collection is standardised.
how can i reference something like this:

<table>
<tr name="id2">


You shouldn't be able to. Table rows, like the vast majority of
elements, do not have name attributes. They do have id attributes,
though. You can then use the getElementById method to obtain a reference:

<tr id="id2">


var row = null;

if(document.getElementById) {
row = document.getElementById('id2');
}
if(row) {
/* Now have a reference to the table row. */
}

[snip]

Hope that helps,
Mike
Thank you, it works nicely.

by,
Greg
 
G

Gregor Rot

Gregor said:
Michael said:
Gregor said:
if i have this code: <form><input type=text name="id1"></form> then
with javascript i can reference this with this.form.id1 [...]



That works because form controls with name and id attributes are
usually made available as properties of a FORM element. However, I
think it's preferable to use the elements collection to reference form
controls:

this.form.elements.id1

The shorthand form was, in my opinion, a mistake and the elements
collection is standardised.
how can i reference something like this:

<table>
<tr name="id2">



You shouldn't be able to. Table rows, like the vast majority of
elements, do not have name attributes. They do have id attributes,
though. You can then use the getElementById method to obtain a reference:

<tr id="id2">


var row = null;

if(document.getElementById) {
row = document.getElementById('id2');
}
if(row) {
/* Now have a reference to the table row. */
}

[snip]

Hope that helps,
Mike
Thank you, it works nicely.

by,
Greg

The problem is that in Mozilla the rows when appearing/disappearing
display strangely, and making more and more space ... strange. Any
experience with that? (in IE it works fine)

I am attaching you the full code so somebody can check - the text at the
end of the page when sqitching the scrollbar gets more and more pushed
down the page...

tnx,
Greg

<html>
<head>
<script language="JavaScript" type="text/javascript">
function getOther(sel,fld){
if (sel.selectedIndex==sel.options.length-1) fld.disabled=false; else
fld.disabled=true;
var row1 = null;
var row2 = null;
var row3 = null;

if(document.getElementById) {
row1 = document.getElementById('id1');
row2 = document.getElementById('id2');
row3 = document.getElementById('id3');
}
if(row1) {
row1.style.display =
(sel.selectedIndex==sel.options.length-1)?"inline":"none";
}
if(row2) {
row2.style.display =
(sel.selectedIndex==sel.options.length-1)?"inline":"none";
}
if(row3) {
row3.style.display =
(sel.selectedIndex==sel.options.length-1)?"inline":"none";
}
}
</script>
</head>

<body>
<form action="">
<div align="center">
<table border="0" name="tb" id="tb" width="364">
<tr>
<td width="177"><b><font face="Verdana" size="2">Podatki o
plačniku</font></b></td>
<td width="177"><font face="Verdana"><select size="1" name="D1"
onchange="getOther(this,this.form.naziv);getOther(this,this.form.sedez);getOther(this,this.form.davcna);">
<option selected value="sam">samoplačnik</option>
<option value="podjetje">podjetje</option>
</select></font></td>
</tr>
<tr id="id1" style="display: none;">
<td width="177">Naziv:</td>
<td width="177"><font face="Verdana">
<input type="text" name="naziv" size="20" disabled></font></td>
</tr>
<tr id="id2" style="display: none;">
<td width="177">Sede<span lang="sl">ž</span></td>
<td width="177"><font face="Verdana">
<input type="text" name="sedez" size="20" disabled></font></td>
</tr>
<tr id="id3" style="display: none;">
<td width="177">Davčna številka</td>
<td width="177"><font face="Verdana">
<input type="text" name="davcna" size="20" disabled></font></td>
</tr>
</table>
</div>
<p align="center">some other text</p>
</form>
</body>

</html>
 
D

Dietmar Meier

Gregor said:
The problem is that in Mozilla the rows when appearing/disappearing
display strangely, and making more and more space ... strange. Any
experience with that? (in IE it works fine)

Assign "", not "inline", to the display property to fix that.

Some more changes I suggest for your script:

function getOther(sel, fld) {
var lastOpt = sel.selectedIndex == sel.options.length - 1;
fld.disabled = !lastOpt;
if (document.getElementById) {
var rows = [
document.getElementById('id1'),
document.getElementById('id2'),
document.getElementById('id3')
];
var disp = lastOpt? "" : "none";
for (var i=0; i<rows.length; i++) {
if (rows && rows.style) {
rows.style.display = disp;
}
}
}
}

ciao, dhgm
 
G

Gregor Rot

Dietmar said:
Gregor said:
The problem is that in Mozilla the rows when appearing/disappearing
display strangely, and making more and more space ... strange. Any
experience with that? (in IE it works fine)


Assign "", not "inline", to the display property to fix that.

Some more changes I suggest for your script:

function getOther(sel, fld) {
var lastOpt = sel.selectedIndex == sel.options.length - 1;
fld.disabled = !lastOpt;
if (document.getElementById) {
var rows = [
document.getElementById('id1'),
document.getElementById('id2'),
document.getElementById('id3')
];
var disp = lastOpt? "" : "none";
for (var i=0; i<rows.length; i++) {
if (rows && rows.style) {
rows.style.display = disp;
}
}
}
}

ciao, dhgm

TNX, it works fine now.

Greg
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,431
Messages
2,571,677
Members
48,796
Latest member
Greg L.

Latest Threads

Top