正在寻找一个css或jquery解决方案,将这些动态加载的表分解为每行最多6个,创建表的脚本会将它们全部内联,有时一行中会显示多达32个td.tables。我如何才能打破它们,其中最多只有6个显示内联
这是HTML
<table class="scoreboardboxscore">
<tbody>
<tr data-bind="foreach: matchups">
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
<td>
<table class="boxscoretable"></table>
</td>
</tr>
</tbody>
</table>
您可以从表中取出所有td
s,将它们放入新创建的tr
s中,并在末尾删除原始tr
:
Fiddle。
$(document).ready(function()
{
var elementsPerRow = 6;
var currentTr = $('<tr>');
var table = $('.scoreboardboxscore');
var tds = $('.scoreboardboxscore tr:first td');
tds.each(function(index)
{
currentTr.append(this);
if (index % elementsPerRow == elementsPerRow - 1)
{
table.append(currentTr);
currentTr = $('<tr>');
}
else if (index + 1 == tds.length)
{
table.append(currentTr);
}
});
$('.scoreboardboxscore tr:first').remove();
});