CODEWITHSUNDEEP
javascriptjquery
heymrcarter
heymrcarter

Reputation: 678

dynamically close and open table rows

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

Upvotes: 1

Views: 1699

Answers (3)

zdyn
zdyn

Reputation: 2183

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

Upvotes: 1

awongh
awongh

Reputation: 1317

I think you have to do it in two steps:

  1. remove the elements:
$('.attributes').find('tr:first-child').remove();

$('.attributes').find('tr:first-child').remove();

2.append them back in the same place

$('.attributes').find('tr:first-child').before('<tr><td>Sizes here</td></tr>');

Upvotes: 0

Josh
Josh

Reputation: 12566

Like so?

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

Upvotes: 0

Related Questions