JQuery Добавление в <tr>элементов после других <tr>элементов - PullRequest
Новая
       12

JQuery Добавление в <tr>элементов после других <tr>элементов

2 голосов
/ 29 февраля 2012

Я пытаюсь добавить элементы <tr> после других элементов <tr> в таблице в соответствии с диапазоном строк элемента <td> в этом конкретном элементе <tr>. В этой же функции при нажатии этой кнопки в элементе <td> размер строки увеличивается на 1 каждый раз, поэтому необходимо также увеличить количество строк. Не уверен, как это сделать. Возможно, используя функцию slice() как-то.

Например, скажем, у нас есть эта структура таблицы. 

<table>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
  </tr>
  <tr>
    <td rowspan="2">Content 4</td>
    <td colspan="2">Content 5</td>
  </tr>
  <tr>
    <td>Content 6</td>
    <td>Content 7</td>
  </tr>
</table>

Итак, я хочу иметь возможность щелкнуть кнопку внутри элемента <td rowspan="2">Content 4</td> и создать еще один <tr>, но, поскольку размер строки уже равен 2, мне нужен еще один элемент <tr>, чтобы он появился в конце таблицы, потому что он должен считать текущий родительский элемент <tr> как 1 в списке <tr> потомков элемента <table>, а следующий элемент <tr> после этого должен быть посчитан как 2, поэтому он должен добавить в Элемент <tr> в конце: в <td rowspan="2">Content 4</td>.

есть 2 интервала строк.

В общем, мне нужно захватить все дочерние элементы <tr>, начиная с родительского элемента <tr> и увеличивая список элементов <tr> в пределах <table>, и подсчитать их с помощью rowspan, если rowspan=1 или rowspan не существует, чем он должен создать другой элемент <tr> непосредственно после родительского элемента <tr> элемента <td> ... 

$(this).parent().after('<tr></tr>');

Но я думаю, что я не могу использовать after() здесь, и должен каким-то образом использовать slice(), потому что если rowspan равен 2, то ему нужно пропустить 2 <tr> элементов, включая родительский <tr> элемент, и добавьте его после этого. Он должен полностью основываться на диапазоне строк этого элемента <td>, по которому щелкают, чтобы новые элементы <tr> всегда располагались в правильном порядке.

Пример кода, который я на самом деле использую для выполнения части after(), которую вместо этого необходимо изменить на основе диапазона строк, выглядит следующим образом: 

for (var i = 0, len = maxAddSections; i < len; i++)
{
    tdHtml += '<td class="dp_add_section" colspan="1" style="display: table-cell;"><div style="opacity: 0.6;"><span class="upperframe"><span></span></span><div class="roundframe blockframe" style="text-align: center;">ADD SECTION</div><span class="lowerframe"><span></span></span></div></td>';
}
pTd.parent().after('<tr class="dp_add_tr_section">' + tdHtml + '</tr>');

pTd - это фактический объект <td>, по которому щелкают внутри элемента <td>. Таким образом, я могу получить диапазон строк следующим образом: pTd.attr('rowspan'); но как я могу положить его туда, куда нужно идти? Например, есть ли nextAll и вычисляется ли он на основе интервала строк, но добавляется только элемент <tr> 1 раз?

Кстати, я использую maxAddSections, который сообщает мне, сколько <td> элементов нужно добавить.

Мне нужно изменить pTd.parent().after(... code ...);, чтобы добавить его после промежутков строк от pTd.parent(), который является элементом <tr> и должен подсчитать количество промежутков строк и пропустить столько элементов <tr>, включая тот, в котором он находится И вот где нужно добавить новый элемент <tr>: '<tr class="dp_add_tr_section">' + tdHtml + '</tr>'

Так что, надеюсь, это поможет уточнить, что я пытаюсь сделать лучше.

Как я могу это сделать?

1 Ответ

1 голос
/ 29 февраля 2012

Я добавил button элементы внутри вашего td и привязал к ним событие щелчка. 

<button class="btn">Add</button>

Событие, вызванное кнопками внутри элементов td, найдет родительский элемент td и получит атрибут rowspan. Затем он получит родительский элемент tr и перейдет к элементу rowspan - 1, следующему за родным элементом tr, и добавит tr после него. 

$(".btn").click(function(){
    var
        $this = $(this),
        $td = $this.parent(),
        rowspan = $td.attr("rowspan") || 1,
        $tr = $td.parent();

    for(var i=1; i<rowspan; ++i)
        $tr = $tr.next();
    $tr.after('<tr><td colspan="3">&nbsp;</td></tr>');
});

Это рабочий пример .

...