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

Question

正在尝试添加 <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> ，但因为 rowspan 已经等于 2，所以我需要另一个 <tr>元素出现在表的末尾，因为它需要计算当前父元素 <tr> <tr> 列表中的元素为 1 <table>的 children 元素和下一个 <tr>之后的元素应该算作2，所以需要添加 <tr>最后的元素导致<td rowspan="2">Content 4</td>中有2行跨度.

所以基本上，我需要捕获所有 child <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>'

因此，希望这有助于澄清我正在努力做得更好的事情。

我该怎么做？

Answer 1

我添加了button td 中的元素并将点击事件绑定(bind)到它们。

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

事件触发到 td 内的按钮元素，会找到父元素 td元素并检索 rowspan属性。然后它会得到父tr元素并移至 rowspan - 1以下 sibling 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 .