gpt4 book ai didi

javascript - jQuery 如何根据 Colum 的值选择表行组?

转载 作者:行者123 更新时间:2023-11-29 18:23:50 27 4
gpt4 key购买 nike

我有一个关于 jQuery 选择器的问题,我有一个表结构如下(HTML 部分),并且表列中有一个链接,用于单击并移动表行“向上”和使用 jQuery(jQuery 部分,引用自 this post)“向下”。

jQuery 部分:

 $(".up,.down").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev("tr:has(td)"));
} else {
row.insertAfter(row.next());
}
});

HTML 部分:

 <table cellspacing="0" border="0" id="Table1" style="text-align:center" >
<tr>
<th scope="col" width="80px">Column A</th><th scope="col" width="80px">Column B</th><th scope="col">&nbsp;</th>
</tr>
<tr>
<td>
<span id="GridView1_ctl02_lbl1">A</span>
</td><td>
<span id="GridView1_ctl02_lbl2">0</span>
</td><td>
<a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
</td>
</tr><tr>
<td>
<span id="GridView1_ctl03_lbl1">B</span>
</td><td>
<span id="GridView1_ctl03_lbl2">2</span>
</td><td>
<a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
</td>
</tr><tr>
<td>
<span id="GridView1_ctl04_lbl1">C</span>
</td><td>
<span id="GridView1_ctl04_lbl2">2</span>
</td><td>
</td>
</tr><tr>
<td>
<span id="GridView1_ctl05_lbl1">D</span>
</td><td>
<span id="GridView1_ctl05_lbl2">2</span>
</td><td>
</td>
</tr><tr>
<td>
<span id="GridView1_ctl06_lbl1">E</span>
</td><td>
<span id="GridView1_ctl06_lbl2">3</span>
</td><td>
<a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
</td>
</tr>
</table>

我希望行按“B 列”中的值“向上”和“向下”移动分组(按照红色框突出显示),而不是普通的逐行移动。基于示例图,行的移动应该是红框移动。

enter image description here

所以我的问题是,如何使用 jQuery 选择器在“Column B”中按值选择行组? onclick 事件是在链接(“向上”和“向下”)点击时触发的。

先谢谢你:)

最佳答案

我不认为你可以用 Just 选择器和一个命令来做到这一点!但你可以使用一些循环:

 $(".up,.down").click(function () {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {

myRow = row;
prevRow = row.prev("tr");

currentValue = myRow.children("td").eq(1).text();
prevValue = prevRow.children("td").eq(1).text();
parNode = myRow.parent();

i = 0;
family = [];
parNode.children("tr").each(function(){
if($(this).children("td").eq(1).text() == currentValue){
family[i] = $(this);
i++;
}
});

for(var j = 0; j <= i; j++ ){
while(prevRow.children("td").eq(1).text() == prevValue){
prevRow = prevRow.prev("tr");
}
family[j].insertAfter(prevRow);
}

} else {
row.insertAfter(row.next());
}
});

此处演示:http://jsfiddle.net/shahverdy/PSDEs/2/在这个演示中,我只实现了 Up。单击 Up 获取值 23 以查看其工作原理。

关于javascript - jQuery 如何根据 Colum 的值选择表行组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15584265/

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