Question

我尝试根据该特定<tr>元素中<tr>元素的行数，在表中的其他<td>元素之后添加<tr>元素。在同一个函数中，单击<td>元素内的此按钮后，每次增加行数，因此需要增加行数。不知道该怎么做。也许以某种方式使用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>子元素列表中的当前父<table>元素计为1，然后将下一个<tr>元素计为1应该计为2，因此最后需要添加<tr>元素，因为<td rowspan="2">Content 4</td>中有2个rowpans。

所以基本上，我需要从父<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()部分的代码示例，需要根据rowspan进行更改，如下所示：

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>对象。所以，我可以按如下方式获取rowspan： pTd.attr('rowspan'); 但我怎么能把它放在需要去的地方？就像有一个nextAll并根据行数计算它，但只在<tr>元素中添加1次？

BTW，我正在使用maxAddSections告诉我要添加多少<td>个元素。

我需要更改pTd.parent().after(... code ...);，以便在pTd.parent()的{{1}}元素的行扫描之后添加它，并且需要计算行数量并跳过那么多<tr>元素包括它所在的元素。这就是它需要添加到新<tr>元素中的位置：<tr>

所以，希望这有助于澄清我想要做得更好的事情。

我该怎么做？

Answer 1

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

这是a working example。

jQuery在其他元素之后添加元素

1 个答案: