javascript - 将表列从一行移动到另一行

Question

我正在使用在您选择选项后自动生成表单的软件，因此代码是自动生成的，我无法直接编辑它。它为此表单输出的代码位于表格中。我希望金额、单选按钮及其标签都显示在一行中？因为我不能直接编辑代码，有没有办法用js来做到这一点？可能将所有列移到一行中？ 以下是 jsfiddle 输出的基本代码的链接: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>

非常感谢您的帮助!

Answer 1

您可以在 CSS 中添加以下规则:

#options tr {
    display: inline-table;
}

如果你想用 jQuery 达到相同的结果，你可以这样写:

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

相反，如果您需要将子表内容移动到上表，您可以:

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

代码片段(CSS解决方案):

#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>

代码片段(jQuery 解决方案):

$('#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>