How to split a table row with jQuery (insert TR between TD's)

前端 未结 3 648
独厮守ぢ
独厮守ぢ 2021-01-14 18:25

I have some problem splitting a table with jQuery.

This is the table:

相关标签:
3条回答
  • 2021-01-14 18:45

    Try this snippet instead:

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

    0 讨论(0)
  • 2021-01-14 18:50
    <script>
         $(".submenu td:nth-child(4)" ).after( "</tr><tr>" );
    </script>
    

    This will work.

    0 讨论(0)
  • 2021-01-14 18:59

    This code solve the problem of yours.

    enter image description here

    $(document).ready(function(){  
         $("table tr td:nth-child(5n)").addClass('break');
        var boundary = $("td.break");
        $("<tr>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());
    });
    

    DEMO

    0 讨论(0)
提交回复
热议问题