468,121 Members | 1,464 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,121 developers. It's quick & easy.

referencing a <tr> object

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
Jul 23 '05 #1
5 5533
Gregor Rot wrote:
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2
Michael Winter wrote:
Gregor Rot wrote:
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
Jul 23 '05 #3
Gregor Rot wrote:
Michael Winter wrote:
Gregor Rot wrote:
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.davc na);">
<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>
Jul 23 '05 #4
Gregor Rot wrote:
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[i] && rows[i].style) {
rows[i].style.display = disp;
}
}
}
}

ciao, dhgm
Jul 23 '05 #5
Dietmar Meier wrote:
Gregor Rot wrote:
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[i] && rows[i].style) {
rows[i].style.display = disp;
}
}
}
}

ciao, dhgm

TNX, it works fine now.

Greg
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by John Geddes | last post: by
4 posts views Thread by El Diablo | last post: by
1 post views Thread by prefersgolfing | last post: by
3 posts views Thread by jack | last post: by
18 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.