Variable Visions

jQuery Tables to Divs

Published Thu. Sep. 26, 2013

If you are working with systems that auto-create table based layouts, like NetSuite, you can use some jQuery magic to convert those old school pesky tr’s and td’s into more suitable div’s where you can style with CSS.

All you need to do is place a few class names on your table tags, then write a simple jQuery .each function using .replaceWith and .html to replace each table tag with markup of your choice. I choose to change all the table elements into div’s so that I could float them into my mobile responsive layouts.

I’ve written functions to change the item list layouts, as well as the category list layouts in NetSuite. The next step is to replace all the tables NetSuite creates, including the large body table containers. By then, I’d guess NetSuite would stop auto-creating table based layouts. :)

Keywords:jQuery Tables to Divs