Jenny Jenny - 1 month ago 5
jQuery Question

Move table columns from one row into another

I am working with software that automatically generates a form after you select your options, so the code is automatically generated and I cannot directly edit it. The code it outputs for this form is in tables. I would like the Amount, the radio buttons and their labels to all appear in one line however?
Because I cannot edit the code directly, is there a way to do this w js? Possibly moving all of the columns into one row?
Here is the link to a jsfiddle to the basic code it outputs: https://jsfiddle.net/jelane20/Lt36fq6f/1/

<table class="form">
<tbody id="panel">
<tr>
<td id="field">
<label id="amount">Amount</label>
</td>
<td class="fieldsRight">
<table id="options">
<tbody>
<tr>
<td class="controlcell">
<span class="top" item index="51" amount="25.00" >
<input id="ad_51_6" type="radio">
<label for="ad_51_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$25.00</span>
</td>
</tr>
<tr>
<td class="controlcell">
<span class="top" item index="52" amount="50.00">
<input id="ad_52_6" type="radio">
<label for="ad_52_6"> </label>
</span>
</td>
<td class="fieldRight">
<span>$50.00</span>
</td>
</tr>
</tbody>
</table>
<tbody>
</td>
</tr>
</tbody>
</table>


Thank you so much for your help!

Answer

You may add to your css the following rule:

#options tr {
    display: inline-table;
}

If you want to achieve the same result with jQuery you can write:

$('#options tr').css('display', 'inline-table');

Instead, if you need to move the sub table content to the upper table you can:

$('#options tr td').each(function(i, e) {
   $(this).appendTo('table.form tr:first');
});

The snippet (css solution):

#options tr {
  display: inline-table;
}
<table class="form">
    <tbody id="panel">
    <tr>
        <td id="field">
            <label id="amount">Amount</label>
        </td>
        <td class="fieldsRight">
            <table id="options">
                <tbody>
                <tr>
                    <td class="controlcell">
                        <span class="top" item index="51" amount="25.00">
                            <input id="ad_51_6" type="radio">
                            <label for="ad_51_6"> </label>
                        </span>
                    </td>
                    <td class="fieldRight" >
                        <span>$25.00</span>
                    </td>
                </tr>
                <tr>
                    <td class="controlcell">
                        <span class="top" item index="52" amount="50.00">
                            <input id="ad_52_6" type="radio">
                            <label for="ad_52_6"> </label>
                        </span>
                    </td>
                    <td class="fieldRight">
                        <span>$50.00</span>
                    </td>
                </tr>
                </tbody>
            </table>
    <tbody>
    </td>
    </tr>
    </tbody>
</table>

The snippet (jQuery solution):

$('#options tr td').each(function(i, e) {
  $(this).appendTo('table.form tr:first');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="form">
    <tbody id="panel">
    <tr>
        <td id="field">
            <label id="amount">Amount</label>
        </td>
        <td class="fieldsRight">
            <table id="options">
                <tbody>
                <tr>
                    <td class="controlcell">
                        <span class="top" item index="51" amount="25.00">
                            <input id="ad_51_6" type="radio">
                            <label for="ad_51_6"> </label>
                        </span>
                    </td>
                    <td class="fieldRight">
                        <span>$25.00</span>
                    </td>
                </tr>
                <tr>
                    <td class="controlcell">
                        <span class="top" item index="52" amount="50.00">
                            <input id="ad_52_6" type="radio">
                            <label for="ad_52_6"> </label>
                        </span>
                    </td>
                    <td class="fieldRight">
                        <span>$50.00</span>
                    </td>
                </tr>
                </tbody>
            </table>
    <tbody>
    </td>
    </tr>
    </tbody>
</table>