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

时间:2016-10-14 13:45:19

标签: javascript jquery

我正在使用在您选择选项后自动生成表单的软件,因此代码会自动生成,我无法直接编辑它。它为此表单输出的代码在表格中。我想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>

非常感谢你的帮助!

1 个答案:

答案 0 :(得分: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;