Question

I have a table on my site that contains the options for different products. I didn’t put it there, the ecommerce platform did. It lists the options in a row in the table. The table looks like this:

<div class="attributes">
    <table>
        <tbody>
            <tr>
                <td>Size:</td>
                <td>&nbsp;</td>
                <td><select><option>Sizes here</option></select></td>
            </tr>
        </tbody>
    </table>
</div>

Then if there were another option it would be in an additional row with the same markup.

This renders with the label (size in this case) out in front of the <select> box. I want the label above the <select> box and I figured the easiest way to accomplish this would be to close the <tr> and open a new one. Any ideas on how to do this?

EDIT: I should mention that the ecommerce platform generates the html and I do not have access to the source code

Answer 1

Assuming that it follows that exact structure, try this:

$(".attributes select").each(function(){
    $label = $(this).parent().prev().prev();
    $label.parent().before("<tr></tr>");
    $label.parent().prev().append($label.clone());
    $label.remove();
    $(this).parent().prev().remove();
});

Here’s an example: Demo