Перемещение столбцов таблицы из одной строки в другую

#javascript #jquery

Вопрос:

Я работаю с программным обеспечением, которое автоматически генерирует форму после выбора параметров, поэтому код генерируется автоматически, и я не могу его редактировать напрямую. Код, который он выводит для этой формы, находится в таблицах. Однако я хотел бы, чтобы количество, переключатели и их метки отображались в одной строке? Поскольку я не могу редактировать код напрямую, есть ли способ сделать это с помощью 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:

Вы можете добавить в свой 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>

Развернуть фрагмент