Название вопроса может показаться неоднозначным, но я попытаюсь подробно объяснить здесь.
Поэтому я создаю динамическую таблицу на основе данных JSON. Внутри таблицы у меня несколько тегов, и в одном из тегов я дополнительно заполняю данные таблицы, заключенные в теги. Количество таблиц внутри тега td может варьироваться, но максимальное количество таблиц равно 4. Вот примерная HTML-разметка, которая создается после заполнения таблицы.
Текущая марка
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table>
</table>
</td>
<td>
<table>
</table>
</td>
<td>
<table>
</table>
</td>
<td>
<table>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Ожидаемая отметка
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<table>
</table>
</td>
<td>
<table>
</table>
</td>
</tr>
<tr>
<td>
<table>
</table>
</td>
<td>
<table>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Как вы можете видеть в третьем теге, у меня есть 4 тега, который содержит отдельные таблицы. То, чего я пытаюсь достичь, если количество тэгов в третьей строке больше 2, тогда я должен создать еще один тег ниже этого и разделить 4 тега (который содержит таблицы) на 2 тега (по 2 тега каждый).
Поскольку таблицы генерируются динамически, у меня нет предопределенной метки HTML.
Это моя соответствующая функция JS
drawRunningDailyDoublesTables: функция (события, таблица) {
var indexes = $(table).data('BetTableData').eventIndexes;
table.innerHTML = '';
// Drawing STAB / NSW product selection
betTable.drawBetTypeProductSelection(table);
// Error space
betTable.drawErrorSpace(table);
var trForTables = $('<tr/>')
.appendTo(table);
// Drawing tables for doubles
$.each(indexes, function(j, index) {
var betTableData = new BetTableData();
betTableData.setMarketId(events[index].markets[0].id);
var doubleTable = $('<table/>')
.data('BetTableData', betTableData);
// Names and info of races
betTable.drawHeaderForDoubles(doubleTable, events[index], 3);
// Horse selections
betTable.drawSelectionsForRunningDoubles(table, doubleTable, events[index], j+1);
// here I am generating the td tag with tables as mentioned in the question. It could be 2,3 or 4 depending on the different situation.
$('<td style="vertical-align: top;"/>')
.appendTo(trForTables)
.append(doubleTable)
// Footer
createFooterRowForRunningDoubles("white", 2, table, doubleTable, j+1);
});
// draw button for betting
betTable.drawExoticBetBtnForDoubles(table);
betTable.selectDefaultRadioProduct(table);
},
Пожалуйста, ознакомьтесь с этой скрипкой:
var thirdRow = $('table:first>tbody>tr:nth-child(3)');
var tablesInThird = thirdRow.find('table');
if(tablesInThird.length === 4)
{
thirdRow.after('<tr class="arse"></tr>');//creates a new tr after 3rd row
tablesInThird.eq(2).parent().appendTo($('tr.arse')); //adds 3rd table
tablesInThird = thirdRow.find('table');
tablesInThird.eq(2).parent().appendTo($('tr.arse')); //adds 4th table
}