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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> 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 <[EMAIL PROTECTED]> wrote:
>
> > > > > On Apr 30, 9:13 am, Mike van Lammeren <[EMAIL PROTECTED]> 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@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
