Transforming tables in html using tritium

I'm using the Moovweb SDK and I'd like to transform a table and all it's elements into divs to facilitate mobile web dev/styling. What is the best way to do this?

<body>
  <table>
    <tbody>
      <tr>
        <td>
          ...
        </td>
      <tr>
     </tbody>
  </table>
</body>

Solution

There's a function I've seen used for this purpose in many projects called table_dump. I can't take credit for inventing it, but here it is in its entirety:

@func XMLNode.table_dump(Text %xpath){
  $(%xpath) {
    name("div")
    add_class("mw_was_table")

    $(".//table | .//tr | .//td | .//th | .//thead | .//tfoot | .//tbody | .//col | .//colgroup | .//caption") {
      %i = index()
      %n = name()
      name("div")
      attributes(data-mw-id: concat("mw_dump_", %n, %i), width: "")
      add_class(concat("mw_was_", %n))
    }

    yield()
  }
}

It really does three things:

Change all tables and table elements to divs
Give each former table element a class mw_was_ with its previous element
Based on the index, give each element a unique id as data-mw-id.

With all three of these you can get rid of a table while preserving the diversity of its elements. This way it remains easily selectable in XPath and CSS, even after you've transformed it.