jquery - jQuery在其他<tr>元素之后添加<tr>元素

我试图根据该特定<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>元素的<tr>子元素列表中将当前父元素<table>计为1，之后的下一个<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()，因为如果行距等于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>'

因此，希望这有助于阐明我正在尝试做的更好的事情。

我怎样才能做到这一点？

最佳答案

我在button中添加了td元素，并将click事件绑定到它们。

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

这是a working example。

关于jquery - jQuery在其他<tr>元素之后添加<tr>元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9492884/