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

问题的标题可能看起来模棱两可，但我会在这里详细解释

因此，我将基于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 index=$（表）.data（'BetTableData'）.eventindex；
table.innerHTML=''；
//图纸STAB/NSW产品选择
betTable.drawBetTypeProductSelection（表格）；
//误差空间
betTable.抽屉空间（表）；
var trForTables=$（''）
.附录（表）；
//为双打画表格
$.each（索引，函数（j，索引）{
var betTableData=新的betTableData（）；
betTableData.setMarketId（事件[index].markets[0].id）；
var doubleTable=$（''）
.数据（“BetTableData”，BetTableData）；
//种族名称和信息
drawHeaderForDoubles（双表，事件[索引]，3）；
//选马
betTable.DrawSelectionsforRunningDouble（表格，doubleTable，事件[索引]，j+1）；
//这里我用问题中提到的表格生成td标签。根据不同的情况，它可以是2、3或4。
$('')
.appendTo（trForTables）
.append（双表）
//页脚
createFooterRowForRunningDoubles（“白色”，2，表格，双表格，j+1）；
});
//投注抽签按钮
可供选择的。付款人（表）；
betTable.选择DefaultRadioProduct（表）；
},

请看这把小提琴：

var thirdRow=$（'table:first>tbody>tr:nth child（3）'）；
var tablesInThird=thirdRow.find（'table'）；
if（表inthird.length==4）
{
thirdRow.after（“”）；//在第三行之后创建一个新的tr
tableInthird.eq（2）.parent（）.appendTo（$（'tr.arse'）；//添加第三个表
tablesInThird=thirdRow.find（'table'）；
tableInthird.eq（2）.parent（）.appendTo（$（'tr.arse'）；//添加第四个表
}

创建一个JSFiddle来帮助回答者隔离受影响的代码+发布一个Before:和After:（你的问题中只有Before）关于应用回答者代码后标记的外观，@JFit我已经用Before和After标记更新了我的问题。我不确定如何在Fiddle上重新创建场景，因为我的代码中没有硬核。所有内容都是动态生成的，所以您希望在每两个内部表之后都执行一次吗？@JFit没错。当它发现第三个tr标记中有4个表时。它将它们分成两个tr标签，每个标签上有两个td（包含表），似乎是Fiddle上的一个独立代码段。但是，我不知道如何将它集成到上面提到的函数中。您正在动态加载它，对吗？在加载内容后，即在完整的/success/函数上，您需要将其放入。一旦动态内容加载到DOM中。事后操纵数据/表不是没有用吗？我需要处理这段代码$（''）.appendTo（trForTables）.append（doubleTable）。目前它返回4个td表（对于这种情况），然后我将其附加到上面函数中定义的一个tr标记上。是否可以将4个td表划分为2组，然后将2个td组附加到函数中定义的tr标记中。这也应该在内容加载到DOM之前完成？也许可以通过CSS或在td元素本身上设置一些width属性来完成，并将第三和第四个td表移动到下一行？不确定如果没有jquery来操作DOM，这怎么可能。。您正在使用的函数是将元素加载到dom中，但我的印象是，标记的格式是由添加的项决定的。。如果不是这样，那么你也可以事先操纵。

        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
}