Read a specific table column with Prototype

Question

Hi,

I need to read all the values of the first column of an HTML table, and I don't want to use DOM methods. I'd like a simpler solution using Prototype or YUI.

Note: the table is generated by a grid widget provided by an external team. That's why we cannot be sure of which IDs or Classnames are used.

In short I'd like something like:

For each row in table XXX
   value = row.column[1].value
   do something with value ...
End For

Thanks in advance

Answer 1

possibly $$('tr') might work. It returns an array of elements based on a CSS rule.

Answer 2

You should be able to do something like $$('tr td:first-child') which should get the first td from each tr. You should then be able to use .innerHTML to get the value.

Answer 3

Using Prototype

$('thetable').childElements()[0].childElements().invoke('firstDescendant');

It all cascades. The first one $('thetable') gets the table. I know you wanted minimal DOM but obviously you'll need to identify the table.

The second one gets all the childElements as an array and grabs the first one which is a tbody item.

Next it grabs of those elements' children which provides an array of table rows.

The last one calls invoke() calls a function on each element in that array. In this case, firstDescendant.

Answer 4

this will get you an array of all the text values in the first column

var arr = $$('tr:first-child').pluck('innerText');

pluck

$$