Question

问题标题可能看起来很模糊，但我会在这里详细解释。

所以我基于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：function（events，table）{

        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);
    },

Answer 1

请看这个小提琴：

http://jsfiddle.net/MXGBu/2/

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
}

检查动态表中td标记的数量，并将它们分成两个相等的tr标记

1 个答案: