Traversing HTML tables with JavaScript / jQuery using the 'headers' attribute

Question

Lets say I have the following table:

<table>
  <thead>
    <tr>
     <th id="th_00">&nbsp;</th>
     <th id="th_01">TH 01</th>
     <th id="th_02">TH 02</th>
     <th id="th_03">TH 03</th>
     <th id="th_04">TH 04</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="th_10">TH 10</th>
      <td headers="th_01 th_10">DATA 11</td>
      <td headers="th_02 th_10">DATA 12</td>
      <td headers="th_03 th_10">DATA 13</td>
      <td headers="th_04 th_10">DATA 14</td>
    </tr>
    <tr>
      <th id="th_20">TH 20</th>
      <td headers="th_01 th_20">DATA 21</td>
      <td headers="th_02 th_20">DATA 22</td>
      <td headers="th_03 th_20">DATA 23</td>
      <td headers="th_04 th_20">DATA 24</td>
    </tr>
  </tbody>
</table>

Is there any native way using JavaScript or jQuery to find a specific cell of data using the headers attribute and the th tags id, or will I have to build the functionality myself?

I am currently using regular expressions and a jQuery('td', 'table tbody').each() loop to retrieve the specific cells I need to use, although this is less than ideal as it loops through each cell individually.

MyStream · Accepted Answer · 2012-11-25 18:14:27Z

5

var td = $('td[headers="th_01 th_10"]');

perhaps?

edited Nov 25, 2012 at 18:14

answered Nov 25, 2012 at 9:39

MyStream

2,5511 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Willis Over a year ago

I actually just thought about doing that!

Collectives™ on Stack Overflow

Traversing HTML tables with JavaScript / jQuery using the 'headers' attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related