Transforming tables in html using tritium

207 Views Asked by Alex De Simone At 19 April 2025 at 00:22

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>

Original Q&A

There are 1 best solutions below

Liam On 23 April 2013 at 19:05 BEST ANSWER

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.

Transforming tables in html using tritium

There are 1 best solutions below

Related Questions in HTML-TABLE

Related Questions in TRANSFORM

Related Questions in MOOVWEB

Related Questions in TRITIUM

Trending Questions

Popular # Hahtags

Popular Questions