Here are some handy extensions to select table rows and columns:
var TableUtils = {
/**
* @param element a table element
* @param integer the requested row
* @return array an array of table cell elements
**/
getRowCells: function(tableElement, rowIndex){
tableElement = $(tableElement); // extend the table element
var tableRows = tableElement.down().childElements();
if(tableRows[rowIndex])
{
return (tableRows[rowIndex]).descendants();
}
return [];
},
/**
* @param element a table element
* @param integer the requested row
* @return array an array of table cell elements
**/
getColumnCells: function(tableElement, columnIndex){
tableElement = $(tableElement); // extend the table element
var columnCells = [];
var tableRows = tableElement.down().childElements();
tableRows.each(function(trEl, index){ // loop over each table
row
var tCells = trEl.descendants(); // table cells in row
if(tCells[columnIndex])
{
columnCells.push($(tCells[columnIndex])); // extend
each tableElement
}
});
return columnCells;
}
}
Element.addMethods(''table'', TableUtils);
Example calls:
$(''testTable'').getColumnCells(1).invoke(''fade'');
$(''testTable'').getRowCells(1).invoke(''fade'');
What do you think? Is there a faster/more elegant solution?
Mike van Lammeren
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
On Tue, Apr 29, 2008 at 6:13 PM, Mike van Lammeren <mvanlamz-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> var tableRows = tableElement.down().childElements();What is the purpose of down() in this case? Is it to get to the tbody? To avoid fetching every row in the table, you could get away with using a child selector to only fetch the row you are looking for. tableElement.select(''tr:nth-child('' + rowIndex + '')''); You''d have to check if there was a thead or tfoot though, since this would be higher up in the DOM than the tbody. Pretty handy little extension though :) -justin On Tue, Apr 29, 2008 at 6:13 PM, Mike van Lammeren <mvanlamz-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> > Here are some handy extensions to select table rows and columns: > > var TableUtils = { > /** > * @param element a table element > * @param integer the requested row > * @return array an array of table cell elements > **/ > getRowCells: function(tableElement, rowIndex){ > tableElement = $(tableElement); // extend the table element > var tableRows = tableElement.down().childElements(); > if(tableRows[rowIndex]) > { > return (tableRows[rowIndex]).descendants(); > } > return []; > }, > /** > * @param element a table element > * @param integer the requested row > * @return array an array of table cell elements > **/ > getColumnCells: function(tableElement, columnIndex){ > tableElement = $(tableElement); // extend the table element > var columnCells = []; > var tableRows = tableElement.down().childElements(); > tableRows.each(function(trEl, index){ // loop over each table > row > var tCells = trEl.descendants(); // table cells in row > if(tCells[columnIndex]) > { > columnCells.push($(tCells[columnIndex])); // extend > each tableElement > } > }); > return columnCells; > } > } > Element.addMethods(''table'', TableUtils); > > > Example calls: > $(''testTable'').getColumnCells(1).invoke(''fade''); > $(''testTable'').getRowCells(1).invoke(''fade''); > > What do you think? Is there a faster/more elegant solution? > > Mike van Lammeren > > > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On Apr 30, 9:13 am, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Here are some handy extensions to select table rows and columns: > > var TableUtils = { > /** > * @param element a table element > * @param integer the requested row > * @return array an array of table cell elements > **/ > getRowCells: function(tableElement, rowIndex){ > tableElement = $(tableElement); // extend the table element > var tableRows = tableElement.down().childElements(); > if(tableRows[rowIndex]) > { > return (tableRows[rowIndex]).descendants(); > } > return []; > },Why traverse the DOM when there are ready-to-use collections? getRowCells: function(tableElement, rowIndex) { return tableElement.rows[rowIndex].cells; }> /** > * @param element a table element > * @param integer the requested row > * @return array an array of table cell elements > **/ > getColumnCells: function(tableElement, columnIndex){ > tableElement = $(tableElement); // extend the table element > var columnCells = []; > var tableRows = tableElement.down().childElements(); > tableRows.each(function(trEl, index){ // loop over each table > row > var tCells = trEl.descendants(); // table cells in row > if(tCells[columnIndex]) > { > columnCells.push($(tCells[columnIndex])); // extend > each tableElement > } > }); > return columnCells; > }}getColumnCells: function(tableElement, columnIndex) { var rows = tableElement.rows; var cells = []; for (var i=0, len=rows.length; i<len; i++) { cells.push(rows[i].cells[columnIndex]); } return cells; } Incidentally, tableSection elements have a rows collection too, so tableElement may not be the best choice of variable name. -- Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Thanks to Justin and RobG for your comments!
To Justin: avoiding selecting every row in the table is a good idea,
and should be a speed improvement.
To RobG: Why traverse the DOM instead of using the collections? No
good reason -- I just didn''t know about the collections,
that''s all!
I''m trying to incorporate both of your suggestions, but there is one
problem I cannot solve. I''m unable to figure out how to extend the
table collections, so that they recognize PrototypeJS methods.
If we use RobG''s suggestion for getRowCells(), then the pluck()
method, for instance, is no longer recognized.
I have made minor improvements to getRowCells(), and the PrototypeJS
methods still work:
/**
* @param element a table element
* @param integer the requested row
* @return array an array of table cell elements (<th> or <td>
tags)
**/
getRowCells: function(tableElement, rowId){
tableElement = $(tableElement); // extend the table element
var tableRow = tableElement.tBodies[0].rows[rowId];
if(tableRow)
{
return ($(tableRow).descendants()).findAll(function(el){
return (el.tagName.toUpperCase() == ''TD'' ||
el.tagName.toUpperCase() == ''TH'') ? true : false;
});
}
return [];
}
On Apr 29, 8:40 pm, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org>
wrote:> On Apr 30, 9:13 am, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
>
>
> > Here are some handy extensions to select table rows and columns:
>
> > var TableUtils = {
> > /**
> > * @param element a table element
> > * @param integer the requested row
> > * @return array an array of table cell elements
> > **/
> > getRowCells: function(tableElement, rowIndex){
> > tableElement = $(tableElement); // extend the table element
> > var tableRows = tableElement.down().childElements();
> > if(tableRows[rowIndex])
> > {
> > return (tableRows[rowIndex]).descendants();
> > }
> > return [];
> > },
>
> Why traverse the DOM when there are ready-to-use collections?
>
> getRowCells: function(tableElement, rowIndex) {
> return tableElement.rows[rowIndex].cells;
> }
>
>
>
> > /**
> > * @param element a table element
> > * @param integer the requested row
> > * @return array an array of table cell elements
> > **/
> > getColumnCells: function(tableElement, columnIndex){
> > tableElement = $(tableElement); // extend the table element
> > var columnCells = [];
> > var tableRows = tableElement.down().childElements();
> > tableRows.each(function(trEl, index){ // loop over each table
> > row
> > var tCells = trEl.descendants(); // table cells in row
> > if(tCells[columnIndex])
> > {
> > columnCells.push($(tCells[columnIndex])); // extend
> > each tableElement
> > }
> > });
> > return columnCells;
> > }}
>
> getColumnCells: function(tableElement, columnIndex) {
> var rows = tableElement.rows;
> var cells = [];
> for (var i=0, len=rows.length; i<len; i++) {
> cells.push(rows[i].cells[columnIndex]);
> }
> return cells;
> }
>
> Incidentally, tableSection elements have a rows collection too, so
> tableElement may not be the best choice of variable name.
>
> --
> Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Also, RobG''s getColumnCells() function works great as a drop-in replacement for my function, but only in Firefox. IE 7 shows a javascript error in Prototype''s Enumerable class. On Apr 30, 2:51 pm, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> Thanks to Justin and RobG for your comments! > > To Justin: avoiding selecting every row in the table is a good idea, > and should be a speed improvement. > > To RobG: Why traverse the DOM instead of using the collections? No > good reason -- I just didn''t know about the collections, that''s all! > > I''m trying to incorporate both of your suggestions, but there is one > problem I cannot solve. I''m unable to figure out how to extend the > table collections, so that they recognize PrototypeJS methods. > > If we use RobG''s suggestion for getRowCells(), then the pluck() > method, for instance, is no longer recognized. > > I have made minor improvements to getRowCells(), and the PrototypeJS > methods still work: > > /** > * @param element a table element > * @param integer the requested row > * @return array an array of table cell elements (<th> or <td> > tags) > **/ > getRowCells: function(tableElement, rowId){ > tableElement = $(tableElement); // extend the table element > var tableRow = tableElement.tBodies[0].rows[rowId]; > if(tableRow) > { > return ($(tableRow).descendants()).findAll(function(el){ > return (el.tagName.toUpperCase() == ''TD'' || > el.tagName.toUpperCase() == ''TH'') ? true : false; > }); > } > return []; > } > > On Apr 29, 8:40 pm, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote: > > > On Apr 30, 9:13 am, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > Here are some handy extensions to select table rows and columns: > > > > var TableUtils = { > > > /** > > > * @param element a table element > > > * @param integer the requested row > > > * @return array an array of table cell elements > > > **/ > > > getRowCells: function(tableElement, rowIndex){ > > > tableElement = $(tableElement); // extend the table element > > > var tableRows = tableElement.down().childElements(); > > > if(tableRows[rowIndex]) > > > { > > > return (tableRows[rowIndex]).descendants(); > > > } > > > return []; > > > }, > > > Why traverse the DOM when there are ready-to-use collections? > > > getRowCells: function(tableElement, rowIndex) { > > return tableElement.rows[rowIndex].cells; > > } > > > > /** > > > * @param element a table element > > > * @param integer the requested row > > > * @return array an array of table cell elements > > > **/ > > > getColumnCells: function(tableElement, columnIndex){ > > > tableElement = $(tableElement); // extend the table element > > > var columnCells = []; > > > var tableRows = tableElement.down().childElements(); > > > tableRows.each(function(trEl, index){ // loop over each table > > > row > > > var tCells = trEl.descendants(); // table cells in row > > > if(tCells[columnIndex]) > > > { > > > columnCells.push($(tCells[columnIndex])); // extend > > > each tableElement > > > } > > > }); > > > return columnCells; > > > }} > > > getColumnCells: function(tableElement, columnIndex) { > > var rows = tableElement.rows; > > var cells = []; > > for (var i=0, len=rows.length; i<len; i++) { > > cells.push(rows[i].cells[columnIndex]); > > } > > return cells; > > } > > > Incidentally, tableSection elements have a rows collection too, so > > tableElement may not be the best choice of variable name. > > > -- > > Rob--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
OK, I just fixed the IE 7 error by extending the cells as they are
pushed onto the array:
getColumnCells: function(tableElement, columnId) {
tableElement = $(tableElement); // extend the table element
var rows = tableElement.rows;
var cells = [];
for (var i=0, len=rows.length; i<len; i++) {
cells.push($(rows[i].cells[columnId]));
}
return cells;
}
On Apr 30, 3:00 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> Also, RobG''s getColumnCells() function works great as a drop-in
> replacement for my function, but only in Firefox. IE 7 shows a
> javascript error in Prototype''s Enumerable class.
>
> On Apr 30, 2:51 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Thanks to Justin and RobG for your comments!
>
> > To Justin: avoiding selecting every row in the table is a good idea,
> > and should be a speed improvement.
>
> > To RobG: Why traverse the DOM instead of using the collections? No
> > good reason -- I just didn''t know about the collections,
that''s all!
>
> > I''m trying to incorporate both of your suggestions, but there
is one
> > problem I cannot solve. I''m unable to figure out how to
extend the
> > table collections, so that they recognize PrototypeJS methods.
>
> > If we use RobG''s suggestion for getRowCells(), then the
pluck()
> > method, for instance, is no longer recognized.
>
> > I have made minor improvements to getRowCells(), and the PrototypeJS
> > methods still work:
>
> > /**
> > * @param element a table element
> > * @param integer the requested row
> > * @return array an array of table cell elements (<th> or
<td>
> > tags)
> > **/
> > getRowCells: function(tableElement, rowId){
> > tableElement = $(tableElement); // extend the table element
> > var tableRow = tableElement.tBodies[0].rows[rowId];
> > if(tableRow)
> > {
> > return ($(tableRow).descendants()).findAll(function(el){
> > return (el.tagName.toUpperCase() ==
''TD'' ||
> > el.tagName.toUpperCase() == ''TH'') ? true : false;
> > });
> > }
> > return [];
> > }
>
> > On Apr 29, 8:40 pm, RobG
<rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:
>
> > > On Apr 30, 9:13 am, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > Here are some handy extensions to select table rows and
columns:
>
> > > > var TableUtils = {
> > > > /**
> > > > * @param element a table element
> > > > * @param integer the requested row
> > > > * @return array an array of table cell elements
> > > > **/
> > > > getRowCells: function(tableElement, rowIndex){
> > > > tableElement = $(tableElement); // extend the table
element
> > > > var tableRows = tableElement.down().childElements();
> > > > if(tableRows[rowIndex])
> > > > {
> > > > return (tableRows[rowIndex]).descendants();
> > > > }
> > > > return [];
> > > > },
>
> > > Why traverse the DOM when there are ready-to-use collections?
>
> > > getRowCells: function(tableElement, rowIndex) {
> > > return tableElement.rows[rowIndex].cells;
> > > }
>
> > > > /**
> > > > * @param element a table element
> > > > * @param integer the requested row
> > > > * @return array an array of table cell elements
> > > > **/
> > > > getColumnCells: function(tableElement, columnIndex){
> > > > tableElement = $(tableElement); // extend the table
element
> > > > var columnCells = [];
> > > > var tableRows = tableElement.down().childElements();
> > > > tableRows.each(function(trEl, index){ // loop over
each table
> > > > row
> > > > var tCells = trEl.descendants(); // table cells
in row
> > > > if(tCells[columnIndex])
> > > > {
> > > > columnCells.push($(tCells[columnIndex])); //
extend
> > > > each tableElement
> > > > }
> > > > });
> > > > return columnCells;
> > > > }}
>
> > > getColumnCells: function(tableElement, columnIndex) {
> > > var rows = tableElement.rows;
> > > var cells = [];
> > > for (var i=0, len=rows.length; i<len; i++) {
> > > cells.push(rows[i].cells[columnIndex]);
> > > }
> > > return cells;
> > > }
>
> > > Incidentally, tableSection elements have a rows collection too,
so
> > > tableElement may not be the best choice of variable name.
>
> > > --
> > > Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
OK, after incorporating Justin and Rob''s comments, here''s
where things
stand:
var TableUtils = {
/**
* @param element a table element
* @param integer the requested row
* @return array an array of table cell elements (<th> or <td>
tags)
**/
getRowCells: function(tableElement, rowIndex) {
tableElement = $(tableElement); // extend the table element
var rowCells = [];
var collectionCells = tableElement.rows[rowIndex].cells;
for(var i = 0, len = collectionCells.length; i < len; ++i) {
rowCells.push($(collectionCells[i]));
}
return rowCells;
},
/**
* @param element a table element
* @param integer the requested row
* @return array an array of table cell elements (<th> or <td>
tags)
**/
getColumnCells: function(tableElement, columnId) {
tableElement = $(tableElement); // extend the table element
var columnCells = [];
var tableRows = tableElement.rows;
for(var i = 0, len = tableRows.length; i < len; ++i) {
columnCells.push($(tableRows[i].cells[columnId]));
}
return columnCells;
}
}
Element.addMethods(''table'', TableUtils);
I''m pretty happy with these methods now, but would welcome any other
suggestions.
On Apr 30, 3:02 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> OK, I just fixed the IE 7 error by extending the cells as they are
> pushed onto the array:
>
> getColumnCells: function(tableElement, columnId) {
> tableElement = $(tableElement); // extend the table element
> var rows = tableElement.rows;
> var cells = [];
> for (var i=0, len=rows.length; i<len; i++) {
> cells.push($(rows[i].cells[columnId]));
> }
> return cells;
> }
>
> On Apr 30, 3:00 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > Also, RobG''s getColumnCells() function works great as a
drop-in
> > replacement for my function, but only in Firefox. IE 7 shows a
> > javascript error in Prototype''s Enumerable class.
>
> > On Apr 30, 2:51 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > Thanks to Justin and RobG for your comments!
>
> > > To Justin: avoiding selecting every row in the table is a good
idea,
> > > and should be a speed improvement.
>
> > > To RobG: Why traverse the DOM instead of using the collections?
No
> > > good reason -- I just didn''t know about the collections,
that''s all!
>
> > > I''m trying to incorporate both of your suggestions, but
there is one
> > > problem I cannot solve. I''m unable to figure out how to
extend the
> > > table collections, so that they recognize PrototypeJS methods.
>
> > > If we use RobG''s suggestion for getRowCells(), then the
pluck()
> > > method, for instance, is no longer recognized.
>
> > > I have made minor improvements to getRowCells(), and the
PrototypeJS
> > > methods still work:
>
> > > /**
> > > * @param element a table element
> > > * @param integer the requested row
> > > * @return array an array of table cell elements (<th>
or <td>
> > > tags)
> > > **/
> > > getRowCells: function(tableElement, rowId){
> > > tableElement = $(tableElement); // extend the table
element
> > > var tableRow = tableElement.tBodies[0].rows[rowId];
> > > if(tableRow)
> > > {
> > > return
($(tableRow).descendants()).findAll(function(el){
> > > return (el.tagName.toUpperCase() ==
''TD'' ||
> > > el.tagName.toUpperCase() == ''TH'') ? true :
false;
> > > });
> > > }
> > > return [];
> > > }
>
> > > On Apr 29, 8:40 pm, RobG
<rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:
>
> > > > On Apr 30, 9:13 am, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > > Here are some handy extensions to select table rows and
columns:
>
> > > > > var TableUtils = {
> > > > > /**
> > > > > * @param element a table element
> > > > > * @param integer the requested row
> > > > > * @return array an array of table cell elements
> > > > > **/
> > > > > getRowCells: function(tableElement, rowIndex){
> > > > > tableElement = $(tableElement); // extend the
table element
> > > > > var tableRows =
tableElement.down().childElements();
> > > > > if(tableRows[rowIndex])
> > > > > {
> > > > > return (tableRows[rowIndex]).descendants();
> > > > > }
> > > > > return [];
> > > > > },
>
> > > > Why traverse the DOM when there are ready-to-use
collections?
>
> > > > getRowCells: function(tableElement, rowIndex) {
> > > > return tableElement.rows[rowIndex].cells;
> > > > }
>
> > > > > /**
> > > > > * @param element a table element
> > > > > * @param integer the requested row
> > > > > * @return array an array of table cell elements
> > > > > **/
> > > > > getColumnCells: function(tableElement,
columnIndex){
> > > > > tableElement = $(tableElement); // extend the
table element
> > > > > var columnCells = [];
> > > > > var tableRows =
tableElement.down().childElements();
> > > > > tableRows.each(function(trEl, index){ // loop
over each table
> > > > > row
> > > > > var tCells = trEl.descendants(); // table
cells in row
> > > > > if(tCells[columnIndex])
> > > > > {
> > > > >
columnCells.push($(tCells[columnIndex])); // extend
> > > > > each tableElement
> > > > > }
> > > > > });
> > > > > return columnCells;
> > > > > }}
>
> > > > getColumnCells: function(tableElement, columnIndex) {
> > > > var rows = tableElement.rows;
> > > > var cells = [];
> > > > for (var i=0, len=rows.length; i<len; i++) {
> > > > cells.push(rows[i].cells[columnIndex]);
> > > > }
> > > > return cells;
> > > > }
>
> > > > Incidentally, tableSection elements have a rows collection
too, so
> > > > tableElement may not be the best choice of variable name.
>
> > > > --
> > > > Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
jjathman-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2008-May-01 04:41 UTC
Re: Extensions to select table rows and columns
You can replace all of getRowCells with something like this:
getRowCells: function(tableElement, rowIndex) {
return $A($(tableElement).rows[rowIndex].cells);
},
$A will take an iterable collection of elements, extend them, and
return a prototype style array. A lot of the problems you are finding
are due to IE not allow the prototype of HTML elements to be extended,
so you have to extend them "by hand". From the Prototype docs:
http://prototypejs.org/learn/extensions
Because the prototype of the native browser object is extended, all
DOM elements have Prototype extension methods built-in. This, however,
isn''t true for IE which doesn''t let anyone touch
HTMLElement.prototype. To make the previous example work in IE you
would have to extend the element with Element.extend(). Don''t worry,
the method is smart enough not to extend an element more than once.
On Apr 30, 2:49 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:> OK, after incorporating Justin and Rob''s comments, here''s
where things
> stand:
>
> var TableUtils = {
> /**
> * @param element a table element
> * @param integer the requested row
> * @return array an array of table cell elements (<th> or
<td>
> tags)
> **/
> getRowCells: function(tableElement, rowIndex) {
> tableElement = $(tableElement); // extend the table element
> var rowCells = [];
> var collectionCells = tableElement.rows[rowIndex].cells;
> for(var i = 0, len = collectionCells.length; i < len; ++i) {
> rowCells.push($(collectionCells[i]));
> }
> return rowCells;
> },
> /**
> * @param element a table element
> * @param integer the requested row
> * @return array an array of table cell elements (<th> or
<td>
> tags)
> **/
> getColumnCells: function(tableElement, columnId) {
> tableElement = $(tableElement); // extend the table element
> var columnCells = [];
> var tableRows = tableElement.rows;
> for(var i = 0, len = tableRows.length; i < len; ++i) {
> columnCells.push($(tableRows[i].cells[columnId]));
> }
> return columnCells;
> }
>
> }
>
> Element.addMethods(''table'', TableUtils);
>
> I''m pretty happy with these methods now, but would welcome any
other
> suggestions.
>
> On Apr 30, 3:02 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > OK, I just fixed the IE 7 error by extending the cells as they are
> > pushed onto the array:
>
> > getColumnCells: function(tableElement, columnId) {
> > tableElement = $(tableElement); // extend the table element
> > var rows = tableElement.rows;
> > var cells = [];
> > for (var i=0, len=rows.length; i<len; i++) {
> > cells.push($(rows[i].cells[columnId]));
> > }
> > return cells;
> > }
>
> > On Apr 30, 3:00 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > Also, RobG''s getColumnCells() function works great as a
drop-in
> > > replacement for my function, but only in Firefox. IE 7 shows a
> > > javascript error in Prototype''s Enumerable class.
>
> > > On Apr 30, 2:51 pm, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > Thanks to Justin and RobG for your comments!
>
> > > > To Justin: avoiding selecting every row in the table is a
good idea,
> > > > and should be a speed improvement.
>
> > > > To RobG: Why traverse the DOM instead of using the
collections? No
> > > > good reason -- I just didn''t know about the
collections, that''s all!
>
> > > > I''m trying to incorporate both of your suggestions,
but there is one
> > > > problem I cannot solve. I''m unable to figure out
how to extend the
> > > > table collections, so that they recognize PrototypeJS
methods.
>
> > > > If we use RobG''s suggestion for getRowCells(), then
the pluck()
> > > > method, for instance, is no longer recognized.
>
> > > > I have made minor improvements to getRowCells(), and the
PrototypeJS
> > > > methods still work:
>
> > > > /**
> > > > * @param element a table element
> > > > * @param integer the requested row
> > > > * @return array an array of table cell elements
(<th> or <td>
> > > > tags)
> > > > **/
> > > > getRowCells: function(tableElement, rowId){
> > > > tableElement = $(tableElement); // extend the table
element
> > > > var tableRow = tableElement.tBodies[0].rows[rowId];
> > > > if(tableRow)
> > > > {
> > > > return
($(tableRow).descendants()).findAll(function(el){
> > > > return (el.tagName.toUpperCase() ==
''TD'' ||
> > > > el.tagName.toUpperCase() == ''TH'') ? true :
false;
> > > > });
> > > > }
> > > > return [];
> > > > }
>
> > > > On Apr 29, 8:40 pm, RobG
<rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:
>
> > > > > On Apr 30, 9:13 am, Mike van Lammeren
<mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
>
> > > > > > Here are some handy extensions to select table
rows and columns:
>
> > > > > > var TableUtils = {
> > > > > > /**
> > > > > > * @param element a table element
> > > > > > * @param integer the requested row
> > > > > > * @return array an array of table cell
elements
> > > > > > **/
> > > > > > getRowCells: function(tableElement, rowIndex){
> > > > > > tableElement = $(tableElement); // extend
the table element
> > > > > > var tableRows =
tableElement.down().childElements();
> > > > > > if(tableRows[rowIndex])
> > > > > > {
> > > > > > return
(tableRows[rowIndex]).descendants();
> > > > > > }
> > > > > > return [];
> > > > > > },
>
> > > > > Why traverse the DOM when there are ready-to-use
collections?
>
> > > > > getRowCells: function(tableElement, rowIndex) {
> > > > > return tableElement.rows[rowIndex].cells;
> > > > > }
>
> > > > > > /**
> > > > > > * @param element a table element
> > > > > > * @param integer the requested row
> > > > > > * @return array an array of table cell
elements
> > > > > > **/
> > > > > > getColumnCells: function(tableElement,
columnIndex){
> > > > > > tableElement = $(tableElement); // extend
the table element
> > > > > > var columnCells = [];
> > > > > > var tableRows =
tableElement.down().childElements();
> > > > > > tableRows.each(function(trEl, index){ //
loop over each table
> > > > > > row
> > > > > > var tCells = trEl.descendants(); //
table cells in row
> > > > > > if(tCells[columnIndex])
> > > > > > {
> > > > > >
columnCells.push($(tCells[columnIndex])); // extend
> > > > > > each tableElement
> > > > > > }
> > > > > > });
> > > > > > return columnCells;
> > > > > > }}
>
> > > > > getColumnCells: function(tableElement, columnIndex) {
> > > > > var rows = tableElement.rows;
> > > > > var cells = [];
> > > > > for (var i=0, len=rows.length; i<len; i++) {
> > > > > cells.push(rows[i].cells[columnIndex]);
> > > > > }
> > > > > return cells;
> > > > > }
>
> > > > > Incidentally, tableSection elements have a rows
collection too, so
> > > > > tableElement may not be the best choice of variable
name.
>
> > > > > --
> > > > > Rob
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
$A() does not accept a collection of elements to extend, this is clearly stated in the documentation as they give a clean example of how one can do that, but it does not behave that way by default. What it does do though, is receive a NodeList object such as a collection returned by getElementsByTagName and convert it to a regular JS Array, which is indeed extended, but with prototype''s Array methods. http://prototypejs.org/api/utility/dollar-a Cheers On May 1, 12:41 am, "jjath...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org" <jjath...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> You can replace all of getRowCells with something like this: > > getRowCells: function(tableElement, rowIndex) { > return $A($(tableElement).rows[rowIndex].cells); > }, > > $A will take an iterable collection of elements, extend them, and > return a prototype style array. A lot of the problems you are finding > are due to IE not allow the prototype of HTML elements to be extended, > so you have to extend them "by hand". From the Prototype docs: > > http://prototypejs.org/learn/extensions > > Because the prototype of the native browser object is extended, all > DOM elements have Prototype extension methods built-in. This, however, > isn''t true for IE which doesn''t let anyone touch > HTMLElement.prototype. To make the previous example work in IE you > would have to extend the element with Element.extend(). Don''t worry, > the method is smart enough not to extend an element more than once. > > On Apr 30, 2:49 pm, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > OK, after incorporating Justin and Rob''s comments, here''s where things > > stand: > > > var TableUtils = { > > /** > > * @param element a table element > > * @param integer the requested row > > * @return array an array of table cell elements (<th> or <td> > > tags) > > **/ > > getRowCells: function(tableElement, rowIndex) { > > tableElement = $(tableElement); // extend the table element > > var rowCells = []; > > var collectionCells = tableElement.rows[rowIndex].cells; > > for(var i = 0, len = collectionCells.length; i < len; ++i) { > > rowCells.push($(collectionCells[i])); > > } > > return rowCells; > > }, > > /** > > * @param element a table element > > * @param integer the requested row > > * @return array an array of table cell elements (<th> or <td> > > tags) > > **/ > > getColumnCells: function(tableElement, columnId) { > > tableElement = $(tableElement); // extend the table element > > var columnCells = []; > > var tableRows = tableElement.rows; > > for(var i = 0, len = tableRows.length; i < len; ++i) { > > columnCells.push($(tableRows[i].cells[columnId])); > > } > > return columnCells; > > } > > > } > > > Element.addMethods(''table'', TableUtils); > > > I''m pretty happy with these methods now, but would welcome any other > > suggestions. > > > On Apr 30, 3:02 pm, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > OK, I just fixed the IE 7 error by extending the cells as they are > > > pushed onto the array: > > > > getColumnCells: function(tableElement, columnId) { > > > tableElement = $(tableElement); // extend the table element > > > var rows = tableElement.rows; > > > var cells = []; > > > for (var i=0, len=rows.length; i<len; i++) { > > > cells.push($(rows[i].cells[columnId])); > > > } > > > return cells; > > > } > > > > On Apr 30, 3:00 pm, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > Also, RobG''s getColumnCells() function works great as a drop-in > > > > replacement for my function, but only in Firefox. IE 7 shows a > > > > javascript error in Prototype''s Enumerable class. > > > > > On Apr 30, 2:51 pm, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > Thanks to Justin and RobG for your comments! > > > > > > To Justin: avoiding selecting every row in the table is a good idea, > > > > > and should be a speed improvement. > > > > > > To RobG: Why traverse the DOM instead of using the collections? No > > > > > good reason -- I just didn''t know about the collections, that''s all! > > > > > > I''m trying to incorporate both of your suggestions, but there is one > > > > > problem I cannot solve. I''m unable to figure out how to extend the > > > > > table collections, so that they recognize PrototypeJS methods. > > > > > > If we use RobG''s suggestion for getRowCells(), then the pluck() > > > > > method, for instance, is no longer recognized. > > > > > > I have made minor improvements to getRowCells(), and the PrototypeJS > > > > > methods still work: > > > > > > /** > > > > > * @param element a table element > > > > > * @param integer the requested row > > > > > * @return array an array of table cell elements (<th> or <td> > > > > > tags) > > > > > **/ > > > > > getRowCells: function(tableElement, rowId){ > > > > > tableElement = $(tableElement); // extend the table element > > > > > var tableRow = tableElement.tBodies[0].rows[rowId]; > > > > > if(tableRow) > > > > > { > > > > > return ($(tableRow).descendants()).findAll(function(el){ > > > > > return (el.tagName.toUpperCase() == ''TD'' || > > > > > el.tagName.toUpperCase() == ''TH'') ? true : false; > > > > > }); > > > > > } > > > > > return []; > > > > > } > > > > > > On Apr 29, 8:40 pm, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote: > > > > > > > On Apr 30, 9:13 am, Mike van Lammeren <mvanl...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: > > > > > > > > Here are some handy extensions to select table rows and columns: > > > > > > > > var TableUtils = { > > > > > > > /** > > > > > > > * @param element a table element > > > > > > > * @param integer the requested row > > > > > > > * @return array an array of table cell elements > > > > > > > **/ > > > > > > > getRowCells: function(tableElement, rowIndex){ > > > > > > > tableElement = $(tableElement); // extend the table element > > > > > > > var tableRows = tableElement.down().childElements(); > > > > > > > if(tableRows[rowIndex]) > > > > > > > { > > > > > > > return (tableRows[rowIndex]).descendants(); > > > > > > > } > > > > > > > return []; > > > > > > > }, > > > > > > > Why traverse the DOM when there are ready-to-use collections? > > > > > > > getRowCells: function(tableElement, rowIndex) { > > > > > > return tableElement.rows[rowIndex].cells; > > > > > > } > > > > > > > > /** > > > > > > > * @param element a table element > > > > > > > * @param integer the requested row > > > > > > > * @return array an array of table cell elements > > > > > > > **/ > > > > > > > getColumnCells: function(tableElement, columnIndex){ > > > > > > > tableElement = $(tableElement); // extend the table element > > > > > > > var columnCells = []; > > > > > > > var tableRows = tableElement.down().childElements(); > > > > > > > tableRows.each(function(trEl, index){ // loop over each table > > > > > > > row > > > > > > > var tCells = trEl.descendants(); // table cells in row > > > > > > > if(tCells[columnIndex]) > > > > > > > { > > > > > > > columnCells.push($(tCells[columnIndex])); // extend > > > > > > > each tableElement > > > > > > > } > > > > > > > }); > > > > > > > return columnCells; > > > > > > > }} > > > > > > > getColumnCells: function(tableElement, columnIndex) { > > > > > > var rows = tableElement.rows; > > > > > > var cells = []; > > > > > > for (var i=0, len=rows.length; i<len; i++) { > > > > > > cells.push(rows[i].cells[columnIndex]); > > > > > > } > > > > > > return cells; > > > > > > } > > > > > > > Incidentally, tableSection elements have a rows collection too, so > > > > > > tableElement may not be the best choice of variable name. > > > > > > > -- > > > > > > Rob--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Matt Foster wrote:> $A() does not accept a collection of elements to extend, this is > clearly stated in the documentation as they give a clean example of > how one can do that, but it does not behave that way by default. What > it does do though, is receive a NodeList object such as a collection > returned by getElementsByTagName and convert it to a regular JS Array, > which is indeed extended, but with prototype''s Array methods. > > http://prototypejs.org/api/utility/dollar-a > > Cheers >So if you have a node list you want to extend, use $A() and collect() $A(nodelist).collect($); - Ken Snyder --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---