gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:01:41 27 4
gpt4 key购买 nike

正在尝试添加 <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>'

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

我该怎么做?

最佳答案

我添加了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 .

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

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com