3

私はテーブルを持っています：

<div id="menu">
    <table cellspacing="0" cellpadding="0" width="930">
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td class="spacer"></td>
                <td>
                    2
                </td>
                <td class="spacer"></td>
                <td>
                    3
                </td>
                <td class="spacer"></td>
                <td>
                    4
                </td>
                <td class="spacer"></td>
                <td>
                    6
                </td>
                <td class="spacer"></td>
                <td>
                    5
                </td>
            </tr>
        </tbody>
    </table>
</div>

そして、このテーブルを 2 つのテーブルに分割する必要があります。
このような：

<div id="menu">
    <table cellspacing="0" cellpadding="0" width="930">
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td class="spacer"></td>
                <td>
                    2
                </td>
                <td class="spacer"></td>
                <td>
                    3
                </td>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr>
                <td>
                    4
                </td>
                <td class="spacer"></td>
                <td>
                    6
                </td>
                <td class="spacer"></td>
                <td>
                    5
                </td>
            </tr>
        </tbody>
    </table>
</div>

だから私はこれをしました：
それは真ん中のスペーサーを見つけて、それをいくつかの終了タグと開始タグに置き換えます.

var menuItems = jQuery('#menu table tr td.spacer').size();
var middle = Math.floor(menuItems/2);
jQuery('#menu table tr').children('td.spacer').each(function(index) {
    if(index == middle) {
        jQuery(this).replaceWith('</tr></tbody></table><table><tbody><tr>');
    }
});

しかし、jQueryはそれを好まないようです...これを行うことは可能ですか? 要素を分割しますか?

4

4 に答える 4

4

これを試して：

$('<table id="sec" cellspacing="0" cellpadding="0" width="930"><tbody><tr></tr></tbody></table>').insertAfter('table');

var s = $('#menu td').size() / 2;

$('#menu td').each(function(){
    if($(this).index() > s) {
      $(this).clone(true).appendTo("#sec tr");
      $(this).remove()
    }
})

http://jsfiddle.net/39pLc/4/

于 2012-05-11T10:01:23.617 に答える
2 
replaceWith doesn't change a part of html element.

それはうまくいくはずです。

<html>
<head>
<script src="../ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="menu">
    <table cellspacing="0" cellpadding="0" width="930">
        <tbody>
            <tr>
                <td>
                    1
                </td>
                <td class="spacer"></td>
                <td>
                    2
                </td>
                <td class="spacer"></td>
                <td>
                    3
                </td>
                <td class="spacer"></td>
                <td>
                    4
                </td>
                <td class="spacer"></td>
                <td>
                    6
                </td>
                <td class="spacer"></td>
                <td>
                    5
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
var tableCells = $('#menu td');
var middleIdx = tableCells.size() / 2;
var currTable = $('#menu table');   
var secTable = $("<table/>").attr({cellSpacing:currTable.attr("cellSpacing"), cellPadding:currTable.attr("cellPadding"), width:currTable.attr("width")})
tableCells.each(function(index){
    if(index == middleIdx){
        $(this).remove();
    }else if($(this).index() > middleIdx) {
      $(this).clone(true).appendTo(secTable);
      $(this).remove()
    }
})     
$("#menu").append(secTable);
</script>
</body>
</html>
于 2012-05-11T10:18:26.373 に答える
0

チェックしてください：http://webworkbyandrea.com/jquery_play/splitTable/split_table_into_four_tables.htm

于 2012-05-11T10:16:04.560 に答える
0 
var menuItems = $('#menu table tr td.spacer').size();
var middle = Math.floor(menuItems/2);
var newTr =$('<tr/>');
$('#menu table').after($('<table cellspacing="0" cellpadding="0" width="930"></table>').append(newTr));
$('#menu table tr td.spacer').eq(middle).nextAll().appendTo(newTr);
$('#menu table tr td.spacer').eq(middle).remove();

デモ

于 2012-05-11T10:08:50.663 に答える