object model, referring to rows

J

jhallbox

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.cells.length;j++){
if(d.rows.cells[j]==which){
d.rows.style.backgroundColor='#FFCC00';
for(var jj=0;jj<d.rows.cells.length;jj++){
u['c'+jj].value = d.rows.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>
 
R

RobG

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">
Click to expand...

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.cells.length;j++){
if(d.rows.cells[j]==which){
d.rows.style.backgroundColor='#FFCC00';
for(var jj=0;jj<d.rows.cells.length;jj++){
u['c'+jj].value = d.rows.cells[jj].firstChild.nodeValue;
}
}
}
}
}
Click to expand...


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.
 
A

ASM

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...
Click to expand...

<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.cells.length;j++)
if(r.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>
The answer would allow me to simplify this (working) snippet. Thanks!

_________________________________________________________________________

<script language="JavaScript" type="text/JavaScript">
function popForm(which){
Click to expand...

function to do something with what object 'which'
d=document.getElementById('lookup');
Click to expand...

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');
Click to expand...

same with the form 'update' which is now 'u' (in JS memory)
for(var i=0;i<d.rows.length;i++){
Click to expand...

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.cells.length;j++){
Click to expand...


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.cells[j]==which){
Click to expand...


if in this 'i'th row, the 'j'th cell is 'which'
('which' figures what object was clicked)
d.rows.style.backgroundColor='#FFCC00';
Click to expand...


the 'i'th row's is colored in fc0
(its backround color style is ...)
for(var jj=0;jj<d.rows.cells.length;jj++){
Click to expand...


always in this 'i'th row,
for jj
growing from 0 to number of cells in row 'i'
u['c'+jj].value = d.rows.cells[jj].firstChild.nodeValue;
Click to expand...


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)
 
J

jhallbox

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!
 
J

jhallbox

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>
 
J

jhallbox

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>
 
R

RobG

Added a feature to this little jscript, now it not only highlights the
Click to expand...

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;
Click to expand...

oldbgc is being declared as a global variable, see below.
// highlight row
rw.style.backgroundColor='#FFCC00';

// check box
cb=document.getElementById('rw'+val);
Click to expand...

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';
Click to expand...

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');
Click to expand...

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;
Click to expand...

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.
 

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

Similar Threads

Bootstrap contact form not working 2
Getting extra blank rows from appending HTML..? 2
Colspan probs 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Filter table rows based on multiple checkboxes value 2
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Toggle for fours colours 3

Members online

No members online now.
Total: 140 (members: 0, guests: 140)
Robots: 370

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top