Prev: Using javascript to tell a frame which page to load
Next: Using Javascript to find if Java applet has loaded
From: Stefan Mueller on 1 Dec 2009 19:53
I'm using the following code to sort a html table:
...
var_table = this.sorttable_tbody;

for (rowcounter = 0; rowcounter < row_array.length; rowcounter++)
{
var_table.appendChild(row_array[rowcounter][1]);
}

The 'appendChild' method moves each row of my existing html table in a
sorted manner to the end of the html table. That really works great an
very fast. However, the rows in my html table look like
<tr class = "tableentry_odd">...
<tr class = "tableentry_even">...
I use this so that each second row has a different background color.
But after I've sorted the html table the background colors get mixed
up.
My intention is now to read the content of 'row_array[rowcounter][1]'
and to adjust '<tr class = "tableentry_...">...' so that each second
row has a different background color again. However, I've no idea how
to read and modify the content of 'row_array[rowcounter][1]'.

If I do 'alert(row_array[rowcounter][1]);' the output always shows
'[object]'.

Does someone know how to read the content of 'row_array[rowcounter]
[1]' and if my intention to modify the content of 'row_array
[rowcounter][1]' makes sense so that each second row has a different
background color even after the html table got sorted?
From: Jason Carlton on 1 Dec 2009 20:19
On Dec 1, 7:53 pm, Stefan Mueller <seekw...(a)yahoo.com> wrote:
> I'm using the following code to sort a html table:
>     ...
>     var_table = this.sorttable_tbody;
>
>     for (rowcounter = 0; rowcounter < row_array.length; rowcounter++)
> {
>       var_table.appendChild(row_array[rowcounter][1]);
>     }
>
> The 'appendChild' method moves each row of my existing html table in a
> sorted manner to the end of the html table. That really works great an
> very fast. However, the rows in my html table look like
>   <tr class = "tableentry_odd">...
>   <tr class = "tableentry_even">...
> I use this so that each second row has a different background color.
> But after I've sorted the html table the background colors get mixed
> up.
> My intention is now to read the content of 'row_array[rowcounter][1]'
> and to adjust '<tr class = "tableentry_...">...' so that each second
> row has a different background color again. However, I've no idea how
> to read and modify the content of 'row_array[rowcounter][1]'.
>
> If I do 'alert(row_array[rowcounter][1]);' the output always shows
> '[object]'.
>
> Does someone know how to read the content of 'row_array[rowcounter]
> [1]' and if my intention to modify the content of 'row_array
> [rowcounter][1]' makes sense so that each second row has a different
> background color even after the html table got sorted?


Are you only trying to alternate the background color? If so,
something like this might be easier:

var bgcolor="#FFFFFF";

for (rowcounter = 0; rowcounter < row_array.length; rowcounter++) {
if (rowcounter/2 == parseInt(rowcounter/2) bgcolor="#000000";
}

There's probably a better way than that, it's just what came
immediately to mind.
From: RobG on 1 Dec 2009 23:59
On Dec 2, 10:53 am, Stefan Mueller <seekw...(a)yahoo.com> wrote:
> I'm using the following code to sort a html table:
> ...
> var_table = this.sorttable_tbody;

It would make more sense to me to call that variable tbody or similar.


> for (rowcounter = 0; rowcounter < row_array.length; rowcounter++)

It is more efficient to get row_array.length once and store the value.
It is also more conventional to use i, j, k etc. for internal counters
(you may have other reasons for using "rowcounter" though):

for (var i=0, iLen=row_array.length; i<iLen; i++)


> {
> var_table.appendChild(row_array[rowcounter][1]);

Here is your opportunity to update the row's class property. Store a
reference to the row and then update the class based on the row index
before adding it to the tbody:

var row = row_array[i][1];
if (i%2) {
row.className = 'tableentry_odd';
} else {
row.className = 'tableentry_even';
}
var_table.appendChild(row);

> }
>
> The 'appendChild' method moves each row of my existing html table in a
> sorted manner to the end of the html table. That really works great an
> very fast.

You may find it faster to make a shallow clone of the tbody element,
add the new rows to that, then when the append loop has finished,
replace the (now empty) tbody with the (now sorted) cloned tbody.
Testing will reveal if it's worthwhile.


> However, the rows in my html table look like
> <tr class = "tableentry_odd">...
> <tr class = "tableentry_even">...
> I use this so that each second row has a different background color.
> But after I've sorted the html table the background colors get mixed
> up.

See above.


> My intention is now to read the content of 'row_array[rowcounter][1]'
> and to adjust '<tr class = "tableentry_...">...' so that each second
> row has a different background color again. However, I've no idea how
> to read and modify the content of 'row_array[rowcounter][1]'.

I'll guess that row_array is actually an array, and that row_array
[row_counter][1] is a reference to a DOM table row element. You don't
want to read the row's content, you just want to modify one of its
properties - see above where the className property is modified (the
DOM className property is equivalent to the HTML class attribute).


>
> If I do 'alert(row_array[rowcounter][1]);' the output always shows
> '[object]'.

row_array[rowcounter][1] is (I've assumed) a reference to a DOM table
row element. Passing it as an argument to alert calls its toString
method, and that's what gets put in the alert dialog. I guess you're
using IE, Firefox (and others) will show "object HTMLTableRowElement".

PS. It was claimed here recently that HTML 5 specifies the behaviour
of DOM 0 methods. Does it specify what window.alert does? I don't see
the toString method of DOM object specified anywhere either.


--
Rob
From: RobG on 2 Dec 2009 01:14
On Dec 2, 2:59 pm, RobG <rg...(a)iinet.net.au> wrote:
> On Dec 2, 10:53 am, Stefan Mueller <seekw...(a)yahoo.com> wrote:
[...]
> Here is your opportunity to update the row's class property. Store a
> reference to the row and then update the class based on the row index
> before adding it to the tbody:
>
> var row = row_array[i][1];
> if (i%2) {
> row.className = 'tableentry_odd';
> } else {
> row.className = 'tableentry_even';
> }

Some one else will likely mention it so I'll get in first. The
if..else block can also be written:

row.className = (i%2)? 'tableentry_odd' : 'tableentry_even';

I wrote it the long way for two reasons:

1. It should be easier to maintain - someone with a minimal grasp of
ECMAScript should be able to work out what it does.

2. I thought it would be faster as an if..else block rather than a
ternary expression. However, testing in IE 6 and Firefox 3.5 shows the
difference in speed to be negligible and likely inconsequential in the
decision of which pattern to use. Results may be different in other
browsers.


> var_table.appendChild(row);
>
> > }
>
> > The 'appendChild' method moves each row of my existing html table in a
> > sorted manner to the end of the html table. That really works great an
> > very fast.
>
> You may find it faster to make a shallow clone of the tbody element,
> add the new rows to that, then when the append loop has finished,
> replace the (now empty) tbody with the (now sorted) cloned tbody.
> Testing will reveal if it's worthwhile.

I should also mention that the cloned tbody element will lose any
listeners added to the element by assigning to its on<event> property
and those added using the W3C addEventListener method, but not those
added inline in the HTML or by the IE proprietary attachEvent method
(in IE at least).


--
Rob
From: Thomas 'PointedEars' Lahn on 2 Dec 2009 09:25
RobG wrote:

> On Dec 2, 2:59 pm, RobG <rg...(a)iinet.net.au> wrote:
>> On Dec 2, 10:53 am, Stefan Mueller <seekw...(a)yahoo.com> wrote:
> [...]
>> Here is your opportunity to update the row's class property. Store a
>> reference to the row and then update the class based on the row index
>> before adding it to the tbody:
>>
>> var row = row_array[i][1];
>> if (i%2) {
>> row.className = 'tableentry_odd';
>> } else {
>> row.className = 'tableentry_even';
>> }

That has become unnecessary for many (but apparently not yet most) browsers,
though, because of the implementation of the corresponding feature of CSS3
Selectors (WD).

> Some one else will likely mention it so I'll get in first. The
> if..else block can also be written:
>
> row.className = (i%2)? 'tableentry_odd' : 'tableentry_even';
>
> I wrote it the long way for two reasons:
>
> 1. It should be easier to maintain - someone with a minimal grasp of
> ECMAScript should be able to work out what it does.

"Easier to maintain" is a double-edged sword, though. It may be easier to
read at first, but when you have to rename something, maintainance does not
become easier but harder as you need to rename it at least twice. Regarding
maintenance, the if-statment approach has the advantage of being a bit more
flexible as each branch can contain statements, not only expressions.

Besides, someone with "a minimal grasp of ECMAScript" should know its
operators, whereas ?: is one of them. Then again, the person you describe
is not likely to be qualified for the job anyway.


PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk
 |  Next  |  Last
Pages: 1 2 3 4
Prev: Using javascript to tell a frame which page to load
Next: Using Javascript to find if Java applet has loaded