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

Question

我正在使用在您选择选项后自动生成表单的软件，因此代码会自动生成，我无法直接编辑它。它为此表单输出的代码在表格中。我想Amount，单选按钮和它们的标签都出现在一行中了吗？ 因为我不能直接编辑代码，有没有办法做到这个w 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解决方案）：

＆＃13;

＆＃13;

#options tr {
  display: inline-table;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

片段（jQuery解决方案）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;