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.

Answer 1

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

perhaps?