By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,400 Members | 1,322 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,400 IT Pros & Developers. It's quick & easy.

object model, referring to rows

P: n/a
I am unclear how to test this object I'm sending to my function. It is
a cell in a table and I simply want to know which row it is in. I am
not a javascript programmer but a javascript cobbler, so illuminating
me about the proper terminology would be greatly appreciated as well...

The answer would allow me to simplify this (working) snippet. Thanks!

__________________________________________________ _______________________

<script language="JavaScript" type="text/JavaScript">
function popForm(which){
d=document.getElementById('lookup');
u=document.getElementById('update');
for(var i=0;i<d.rows.length;i++){
for(var j=0;j<d.rows[i].cells.length;j++){
if(d.rows[i].cells[j]==which){
d.rows[i].style.backgroundColor='#FFCC00';
for(var jj=0;jj<d.rows[i].cells.length;jj++){
u['c'+jj].value = d.rows[i].cells[jj].firstChild.nodeValue;
}
}
}
}
}
</script>


</head>

<body>
<table width="75%" border="1" id="lookup">
<tr><td colspan="3">Lookup Table</td></tr>
<tr>
<td onClick="popForm(this);">100</td>
<td>300</td>
<td>500</td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
</table>

<form method="post" action="" id="update">
<input type="text" name="a" id="c0">
<input type="text" name="b" id="c1">
<input type="text" name="c" id="c2">
</form>
</body>
</html>

Aug 23 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
jh******@gmail.com wrote:
I am unclear how to test this object I'm sending to my function. It is
a cell in a table and I simply want to know which row it is in. I am
not a javascript programmer but a javascript cobbler, so illuminating
me about the proper terminology would be greatly appreciated as well...

The answer would allow me to simplify this (working) snippet. Thanks!

__________________________________________________ _______________________

<script language="JavaScript" type="text/JavaScript">
The language attribute is depreciated, just use type.
function popForm(which){
d=document.getElementById('lookup');
u=document.getElementById('update');
for(var i=0;i<d.rows.length;i++){
for(var j=0;j<d.rows[i].cells.length;j++){
if(d.rows[i].cells[j]==which){
d.rows[i].style.backgroundColor='#FFCC00';
for(var jj=0;jj<d.rows[i].cells.length;jj++){
u['c'+jj].value = d.rows[i].cells[jj].firstChild.nodeValue;
}
}
}
}
}
If 'works' means that the parent row of the cell has its background
colour changed, then:

function popForm( el ){
if ( ! el.style ) return;
while ( el.parentNode && 'tr' != el.nodeName.toLowerCase() ) {
el = el.parentNode;
}
el.style.backgroundColor = '#FFCC00';
}

is the simple method. But even simpler is to put an onclick event on the
TR itself - it depends on what you are really trying to do.

The second part of your function appears to be trying to change the
values of the form controls - is that it? If so, you need to use the
form's elements collection.
</script>


</head>

<body>
<table width="75%" border="1" id="lookup">
<tr><td colspan="3">Lookup Table</td></tr>
<tr>
<td onClick="popForm(this);">100</td>
<td>300</td>
<td>500</td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
</table>

<form method="post" action="" id="update">
<input type="text" name="a" id="c0">
<input type="text" name="b" id="c1">
<input type="text" name="c" id="c2">
</form>
</body>
</html>

--
Rob
Aug 23 '05 #2

P: n/a
ASM
jh******@gmail.com wrote:
I am unclear how to test this object I'm sending to my function. It is
a cell in a table and I simply want to know which row it is in. I am
not a javascript programmer but a javascript cobbler, so illuminating
me about the proper terminology would be greatly appreciated as well...
<table>
<tr>
<td>1</td>
<td
onclick="var r = this.rows;
for(var i=0;i<r.length;i++) for(var j=0;j<r[i].cells.length;j++)
if(r[i].cells[j]==this)
{
alert('Row = 'i+1);
return;
}
">2</td>
<td>3</td>
</tr><tr><td>4</td><td>5</td><td>6</td></tr>
</table>
The answer would allow me to simplify this (working) snippet. Thanks!

__________________________________________________ _______________________

<script language="JavaScript" type="text/JavaScript">
function popForm(which){
function to do something with what object 'which'
d=document.getElementById('lookup');
d = object in page with an 'id' nammed 'lookup'
here d = the table
d (the table) contains n rows,
JS count them from 0 (zero insteed of one)
u=document.getElementById('update');
same with the form 'update' which is now 'u' (in JS memory)
for(var i=0;i<d.rows.length;i++){
for i
growing from 0 to number of rows in table
(table = 'd' in JS memory)
(d.rows.length = number of rows in normal math)
for(var j=0;j<d.rows[i].cells.length;j++){
then (with each case of i)
for j
growing from 0 to number of cells in row 'i'
(now JS instigates the line 1 if i=0)
if(d.rows[i].cells[j]==which){
if in this 'i'th row, the 'j'th cell is 'which'
('which' figures what object was clicked)
d.rows[i].style.backgroundColor='#FFCC00';
the 'i'th row's is colored in fc0
(its backround color style is ...)
for(var jj=0;jj<d.rows[i].cells.length;jj++){
always in this 'i'th row,
for jj
growing from 0 to number of cells in row 'i'
u['c'+jj].value = d.rows[i].cells[jj].firstChild.nodeValue;
the value of u element named : 'c' + jj
(that's to say form inputs nammed 'c0', then 'c1' then ... values)
becomes : value of first child of 'jj'th cell of 'i'th row

in this example :
- 'which' will be 1st cell in 1st row (where the click appends)
- only 1st row will be investigate
- in this row,
each cell input (firstChild.nodeValue) will be copied in a textbox
Each cell input copied in textbox of same row
(that's to say c0 = R1C1 input, c1 = R1C2 input, c2 = R1C3 input)
}
}
}
}
}
</script>


</head>

<body>
<table width="75%" border="1" id="lookup">
<tr><td colspan="3">Lookup Table</td></tr>
<tr>
<td onClick="popForm(this);">100</td>
<td>300</td>
<td>500</td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
</table>

<form method="post" action="" id="update">
<input type="text" name="a" id="c0">
<input type="text" name="b" id="c1">
<input type="text" name="c" id="c2">
</form>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac
Aug 24 '05 #3

P: n/a
Thanks all very much for the information. I put the ugly thing together
based on a few examples, it is doing what I need it to do [highlight
the source row and populate a form with the data from that row] but I
knew it could be done much more elegantly if I really knew what I was
doing.

Thanks again!

Aug 24 '05 #4

P: n/a
Great guys! Now here's a useful finished test case; automatically
populating a form with data from a row; highlighting the source row
and reverting it back to it's default color if a new row is selected.
[chubby fingered managers..]

I'm ready to integrate the javascript into my php app! Thanks again.
<script type="text/JavaScript">
var oldrw;

function popForm(rw){

// preserve old cellcolor
if(oldrw) oldrw.style.backgroundColor=oldbgc;
oldrw=rw; oldbgc=rw.style.backgroundColor;

// highlight row
rw.style.backgroundColor='#FFCC00';

u=document.getElementById('update');
for(var j=0;j<rw.cells.length;j++){
u['c'+ j].value = rw.cells[j].firstChild.nodeValue;
}
}
</script>
</head>

<body>
<table width="75%" border="1" id="lookup">
<tr><td colspan="3">Lookup Table</td></tr>
<tr onClick="popForm(this);">
<td>100</td>
<td>300</td>
<td>500</td>
</tr>
<tr onClick="popForm(this);">
<td>cdf</td>
<td>xdd</td>
<td>12.3</td>
</tr>
<tr><td colspan="3">&nbsp;</td></tr>
</table>
<p>Update Table
<form method="post" action="" id="update">
<input type="text" name="a" id="c0">
<input type="text" name="b" id="c1">
<input type="text" name="c" id="c2">
</form>
</p>
</body>
</html>

Aug 24 '05 #5

P: n/a
Added a feature to this little jscript, now it not only highlights the
row and populates a form with that row's data, but if I give radio
buttons at the beginning of the row a name 'rw' combined with the row
number; I can check them off too. I'm certain there is a better way to
use this using the DOM to figure out which radio button is in my
triggering row, But I have to move on to other things now. [good enough
for government work as they say..]

I've also added a couple bugfixes in case cells in the source table are
empty or there is no corrolary target input for the data to go into in
the form..

<script type="text/JavaScript">
var oldrw;

function popForm(rw,val){

// preserve old cellcolor
if(oldrw) oldrw.style.backgroundColor=oldbgc;
oldrw=rw; oldbgc=rw.style.backgroundColor;

// highlight row
rw.style.backgroundColor='#FFCC00';

// check box
cb=document.getElementById('rw'+val);
cb.checked='true';

u=document.getElementById('update');

for(var j=0;j<rw.cells.length;j++){
if(! u['c'+ j]) continue; if (! rw.cells[j].firstChild) continue;
u['c'+ j].value = rw.cells[j].firstChild.nodeValue;
}
}

</script>

Aug 24 '05 #6

P: n/a
jh******@gmail.com wrote:
Added a feature to this little jscript, now it not only highlights the
You probably want to carefully consider use of the term 'jscript' when
you likely mean 'javascript'.

Using a script element type attribute of 'text/jscript' will cause the
script not to be executed in many UAs (though not all - IE is happy with
it), whereas 'text/javascript' is accepted almost everywhere by UAs that
support scripting.

JScript is a registered trademark of Microsoft Corp. and is their
implementation of ECMAScript.

JavaScript was originally a registered trademark of Netscape
Communications but now belongs to Sun Microsystems, Inc. It is
implemented by almost everyone who makes a browser.
row and populates a form with that row's data, but if I give radio
buttons at the beginning of the row a name 'rw' combined with the row
number; I can check them off too. I'm certain there is a better way to
use this using the DOM to figure out which radio button is in my
triggering row, But I have to move on to other things now. [good enough
for government work as they say..]

I've also added a couple bugfixes in case cells in the source table are
empty or there is no corrolary target input for the data to go into in
the form..

<script type="text/JavaScript">
var oldrw;

function popForm(rw,val){

// preserve old cellcolor
if(oldrw) oldrw.style.backgroundColor=oldbgc;
oldrw=rw; oldbgc=rw.style.backgroundColor;
oldbgc is being declared as a global variable, see below.

// highlight row
rw.style.backgroundColor='#FFCC00';

// check box
cb=document.getElementById('rw'+val);
cb is declared here as a global, is that necessary? It's good practice
to keep variables local unless they really do need to be global:

var cb = document.getElementById( 'rw' + val );
cb.checked='true';
The checked attribute is a boolean, so it should be set as one (though
using a string seems to work OK in some browsers):

cb.checked = true;
u=document.getElementById('update');
Global scope again:

var u=document.getElementById('update');
for(var j=0;j<rw.cells.length;j++){
if(! u['c'+ j]) continue; if (! rw.cells[j].firstChild) continue;
u['c'+ j].value = rw.cells[j].firstChild.nodeValue;
The use of continue can nearly always be avoided, try:

if( u['c'+j] && rw.cells[j].firstChild ) {
u['c'+j].value = rw.cells[j].firstChild.nodeValue;
}

If you were going to do lots and lots of these (say a few hundred) then:

var x, y;
...
for(var j=0, len=rw.cells.length; j<len; j++){
if( ( x=u['c'+j] ) && ( y=rw.cells[j].firstChild ) ) {
x.value = y.nodeValue;
}
}

should save a bit of time by reducing the number of lookups, but for 10
or 20 you wont notice the difference.
}
}

</script>


--
Rob
Aug 25 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.