{"id":34,"date":"2009-09-26T03:08:12","date_gmt":"2009-09-26T07:08:12","guid":{"rendered":"http:\/\/dan.verweire.com\/?p=34"},"modified":"2009-09-26T03:22:52","modified_gmt":"2009-09-26T07:22:52","slug":"traversing-tables-with-jquery-1","status":"publish","type":"post","link":"http:\/\/dan.verweire.com\/?p=34","title":{"rendered":"traversing tables with jQuery #1"},"content":{"rendered":"

While developing a JavaScript GridLayout tool at work today, I ran in to a tough spot while traversing tables with jQuery. What I wanted was to only work with the TR and TD elements within the parent table and not any nested tables. At first, I was using code like this (see HTML later for an example of what I was working with): <\/p>\n

\n
    \n
  1. \n
    $(<\/span>‘#myTable’<\/span>‘tr’<\/span>\/\/do stuff<\/span><\/div>\n<\/li>\n
  2. \n
    ‘td’<\/span>\/\/do stuff<\/span><\/div>\n<\/li>\n
  3. \n
     }<\/span>)<\/span><\/div>\n<\/li>\n
  4. \n
    }<\/span>)<\/span><\/div>\n<\/li>\n<\/ol>\n<\/div>\n

    But the problem with this is that both calls to the ‘find’ method would return all TRs or TDs that are decedents of #myTable, no matter how deep. I could have used a selector that would have found the tbody (the first child of the table not shown in the markup but inserted by the browser) and then found all of the TRs that were children of that and so forth. My issue with that is that I’m not confidant that all browsers insert the tbody element. I’ve read online that they are supposed to, but for real, who knows? And I don’t like programming browser-specific stuff. <\/p>\n

    At any rate, the easiest way I found to accomplish this is to pass the table.rows and rows.cells collections to the jQuery constructor ala:<\/p>\n

    \n
      \n
    1. \n
      $(<\/span>$(<\/span>‘#myTable’<\/span>)<\/span>.attr<\/span>(<\/span>‘rows’<\/span>\/\/do stuff<\/span><\/div>\n<\/li>\n
    2. \n
       <\/div>\n<\/li>\n
    3. \n
       $(<\/span>$tr.attr<\/span>(<\/span>‘cells’<\/span>\/\/do stuff<\/span><\/div>\n<\/li>\n
    4. \n
       }<\/span>)<\/span><\/div>\n<\/li>\n
    5. \n
      }<\/span>)<\/span><\/div>\n<\/li>\n<\/ol>\n<\/div>\n

      And boom, no nested tables return. Wonderful. At least I think that’s what I did. It’s been a few hours now…. <\/p>\n

      The HTML:<\/p>\n

      \n
        \n
      1. \n
        <table id="myTable">\n<\/div>\n<\/li>\n
      2. \n
         <tr>\n<\/div>\n<\/li>\n
      3. \n
          <td>stuff<\/td>\n<\/div>\n<\/li>\n
      4. \n
          <td>things<\/td>\n<\/div>\n<\/li>\n
      5. \n
         <\/tr>\n<\/div>\n<\/li>\n
      6. \n
         <tr>\n<\/div>\n<\/li>\n
      7. \n
          <td colspan="2">\n<\/div>\n<\/li>\n
      8. \n
           <table>\n<\/div>\n<\/li>\n
      9. \n
            <tr>\n<\/div>\n<\/li>\n
      10. \n
             <td>cat<\/td>\n<\/div>\n<\/li>\n
      11. \n
             <td>dog<\/td>\n<\/div>\n<\/li>\n
      12. \n
            <\/tr>\n<\/div>\n<\/li>\n
      13. \n
           <\/table>\n<\/div>\n<\/li>\n
      14. \n
          <\/td>\n<\/div>\n<\/li>\n
      15. \n
         <\/tr>\n<\/div>\n<\/li>\n
      16. \n
        <\/table><\/div>\n<\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

        While developing a JavaScript GridLayout tool at work today, I ran in to a tough spot while traversing tables with jQuery. What I wanted was to only work with the TR and TD elements within the parent table and not any nested tables. At first, I was using code like this (see HTML later for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,5],"tags":[9,10,26,11],"_links":{"self":[{"href":"http:\/\/dan.verweire.com\/index.php?rest_route=\/wp\/v2\/posts\/34"}],"collection":[{"href":"http:\/\/dan.verweire.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dan.verweire.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dan.verweire.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dan.verweire.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=34"}],"version-history":[{"count":5,"href":"http:\/\/dan.verweire.com\/index.php?rest_route=\/wp\/v2\/posts\/34\/revisions"}],"predecessor-version":[{"id":39,"href":"http:\/\/dan.verweire.com\/index.php?rest_route=\/wp\/v2\/posts\/34\/revisions\/39"}],"wp:attachment":[{"href":"http:\/\/dan.verweire.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=34"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dan.verweire.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=34"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dan.verweire.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}