Hi,
The Prototype equivalent of `getElementById` is `$`, and then from
that element the method for getting the elements matching a CSS
selector is `select`. Prototype has a `setStyle` wrapper around style
stuff that smooths out some rough spots for you, and a `hide` function
that is the equivalent of `display: none`. So a rough translation of
your code might be:
var tbl, rows, cols, rowidx;
tbl = $('ctl00_m_g_0ab7c148_0e6c_49e4_bc03_fd1064ca4b41_ctl 00_Grid');
if (tbl) {
rows = tbl.select('tr');
cols = rows[0].select('th');
cols[0].setStyle({"width": "300px"});
cols[1].hide();
cols[2].hide();
for (rowidx = 1; rowidx < rows.length; ++rowidx) {
cols = rows[rowidx].select('td');
cols[0].setStyle({"width": "300px"});
cols[1].hide();
cols[2].hide();
}
}
Refs:
http://api.prototypejs.org/dom/dollar/
http://api.prototypejs.org/dom/Element/select/
http://api.prototypejs.org/dom/Element/setStyle/
http://api.prototypejs.org/dom/Element/hide/
As you can see, that doesn't change all that much, though it's
shorter. (If we were selecting elements by a more complex CSS
expression, Prototype would help a lot -- but just searching for
subordinate elements by their tagname, not so much.)
Side note: Your table ID seems to have a space in it (just before the
"00_Grid" part). Although IDs can have spaces, you can't use spaces in
an ID you're going to use with a CSS selector, and so for that reason
I tend to avoid them -- you can't style them (directly) and you can't
use advanced JavaScript on them or their contents. I can't be 100%
sure that the code above will work with an ID that can't be used in a
CSS selector. Strongly recommend sticking to the CSS ID rules when
selecting HTML element IDs for elements you're later going to
manipulate via a JavaScript library.
HTH,
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com
On Dec 2, 8:16 pm, KenB <[email protected]> wrote:
> I am new to prototype and need to learn how to traverse an html table
> and hide some columns. The only id I have is table id or the class it
> is associated with. Can anyone give me an example?
>
> Here is what I am trying to accomplish.
>
> var tbl =
> document.getElementById('ctl00_m_g_0ab7c148_0e6c_49e4_bc03_fd1064ca4b41_ctl
> 00_Grid');
>
> if (tbl != null){
>
> var rows = tbl.getElementsByTagName('tr');
>
> var cols = rows[0].getElementsByTagName('th');
> cols[0].style.width = '300px';
> cols[1].style.display = 'none';
> cols[2].style.display = 'none';
>
> //Now loop through the data rows and hide specific cells
> for (var row = 1; row < rows.length; row++) {
> var cels = rows[row].getElementsByTagName('td');
> //alert(cels[1].valueOf);
> cels[0].style.width = '300px';
> cels[1].style.display = 'none';
> cels[2].style.display = 'none';
> }
>
> }
>
> Thanks!
>
> Ken
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
