jquery - 如何使用jQuery拆分表行(在TD之间插入TR)

我在用jQuery拆分表时遇到一些问题。

这是表：

<table width="100%" id="submenu">
    <tr>
        <td class="submenu">A</td>
        <td class="submenu">B</td>
        <td class="submenu">C</td>
        <td class="submenu">D</td>
        <td class="submenu">E</td>
        <td class="submenu">F</td>
        <td class="submenu">G</td>
        <td class="submenu">H</td>
    </tr>
</table>

我想在调用函数后使其看起来像这样：

<table width="100%" id="submenu">
    <tr>
        <td class="submenu">A</td>
        <td class="submenu">B</td>
        <td class="submenu">C</td>
        <td class="submenu">D</td>
    </tr>
    <tr>
        <td class="submenu">E</td>
        <td class="submenu">F</td>
        <td class="submenu">G</td>
        <td class="submenu">H</td>
    </tr>
</table>

我尝试过：

$(function(){
    $('.submenu td:eq(3)').after('</tr><tr>');
});

最佳答案

请尝试以下代码片段：

$(function(){
  // # Add a new row after the first one in the table
  $('table#submenu tr:first').after('<tr></tr>');

  // # Move the four last TDs to this new row
  $('table#submenu tr:first td.submenu:gt(3)') // Select the four last TDs
   .detach() // Detach them from their current row
   .appendTo('table#submenu tr:nth-child(2)'); // Add them at the end of the new row
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width="100%" id="submenu" border="1">
    <tr>
        <td class="submenu">A</td>
        <td class="submenu">B</td>
        <td class="submenu">C</td>
        <td class="submenu">D</td>
        <td class="submenu">E</td>
        <td class="submenu">F</td>
        <td class="submenu">G</td>
        <td class="submenu">H</td>
    </tr>
</table>