In my store there many items have different options like size or color. The eCommerce platform allows for these but codes them using tables. I cannot access the source files of the platform so there’s nothing I can do on the backend to format these the way I would like. Currently they are formatted like:
<div class="attributes">
<table>
<tbody>
<tr>
<td>Size:</td>
<td> </td>
<td><select><option>Select</option></select</td>
</tr>
</tbody>
</table>
</div>
Each option is in its own row so if there were the option to pick the color, there would just be another row in the table with three <td>‘s that had the options for the color. Now what I want is instead of these to be listed vertically, I want them listed horizontally. What would be the best way to accomplish this? I should mention JavaScript is my only choice as the platform doesn’t allow any asp or php files to be uploaded to the server. I’m hoping there is a relatively easy way to do this. I’ve tried grabbing the contents of each <td> and storing it and then removing the <table> from the DOM and inserting the contents into <p> tags but that got to be more trouble than it was worth. Any suggestions would be greatly appreciated.
Maybe you should change the platform. 😉
If JavaScript is your only choice, then you need to parse the tables and rewrite the whole DOM.Parse the table, convert it into json and then you should use javascript templating for this (maybe Mustache), to make your live easier. Otherwise you might go insane.