$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, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> 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 <[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 -~----------~----~----~----~------~----~------~--~---
