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>
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:
mw_was_
with its previous element 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.