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

Question

我正在尝试根据特定<tr> 元素中<td> 元素的行跨度在表中的其他<tr> 元素之后添加<tr> 元素。在同一个函数中，点击<td>元素内的这个按钮，rowspan每次增加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>，但由于rowspan 已经等于2，我需要另一个<tr> 元素出现在表格的末尾，因为它需要在<table>元素的<tr>子元素列表中将当前父<tr>元素计为1，之后的下一个<tr>元素应该计为2，所以它需要添加一个<tr> 元素在最后，因为 <td rowspan="2">Content 4</td> 中有 2 个行跨度。

所以基本上，我需要捕获所有以父<tr> 元素开头的子<tr> 元素，并在<table> 中向下递增<tr> 元素列表，并使用rowspan 对它们进行计数，如果@987654342 @ 或 rowspan 不存在，它应该在 <td> 元素的父 <tr> 元素之后直接创建另一个 <tr> 元素...

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

但我想我不能在这里使用after()，应该以某种方式使用slice()，因为如果行跨度等于2，那么它需要跳过2个<tr>元素，包括父@987654350 @ 元素，然后添加它。它需要完全基于被单击的<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>'

所以，希望这有助于澄清我正在努力做得更好。

我该怎么做？

Answer 1

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

<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。