我有一张桌子:
<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>
我需要把这张桌子分成两张桌子 像这样:
<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似乎并不喜欢......有可能这样做吗?拆分元素?
答案 0 :(得分: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()
}
})
答案 1 :(得分: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>
答案 2 :(得分: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();
答案 3 :(得分:0)