проверка количества тегов td в динамической таблице и разделение их на два одинаковых тега tr

0

Название вопроса может показаться неоднозначным, но я попытаюсь подробно объяснить здесь.

Поэтому я создаю динамическую таблицу на основе данных 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);
    },
  • 0
    Создайте JSFiddle, чтобы помочь ответчику изолировать затронутый код + опубликовать до: и после: (у вас есть только до в вашем вопросе), как будет выглядеть разметка после применения кода ответчика,
  • 0
    @JFit Я обновил свой вопрос до и после разметки. Я не уверен, как воссоздать сценарий на Fiddle, поскольку в моем коде нет ничего хардкорного. Все генерируется динамически,
Показать ещё 2 комментария
Теги:

1 ответ

0

Пожалуйста, ознакомьтесь с этой скрипкой:

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
}
  • 0
    Кажется, работает как автономный фрагмент на Fiddle. Тем не менее, я не знаю, как мне интегрировать его в мою функцию, упомянутую выше.
  • 0
    Вы загружаете это динамически правильно? вам нужно будет поместить его в ПОСЛЕ загрузки содержимого, т. е. по завершению / успеху / функции.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню