On Dec 3, 6:16 am, 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_ctl00_Grid');
>
> if (tbl != null){
>
> var rows = tbl.getElementsByTagName('tr');
table elements have a rows property that is a collection of all the
rows in the table, so no need for getElementsByTagName:
var rows = tbl.rows;
> var cols = rows[0].getElementsByTagName('th');
Table rows (TR) have a cells property that is a collection of all the
cells in the row, so if all the cells are TRs then:
var cols = rows[0].cells;
> 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');
Same here, no need for getElementsByTagName:
var cels = rows[row].cells;
> //alert(cels[1].valueOf);
> cels[0].style.width = '300px';
> cels[1].style.display = 'none';
> cels[2].style.display = 'none';
> }
> }
Rather than looping over every cell in every row, consider creating
col[1] or colgroup[2] elements whose purpose is to provide a mechnaism
for applying styles to columns instead of each cell individually.
1. <URL: http://www.w3.org/TR/html401/struct/tables.html#edef-COL >
2. <URL: http://www.w3.org/TR/html401/struct/tables.html#edef-COLGROUP
>
--
Rob
--
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.
