[英]How can jQuery select Table Row group by Colum's value?
我有一个关于jQuery选择器的问题,我的表结构如下( HTML部分 ),并且在表列中有一个链接,用于单击并使用jQuery将表行“向上”和“向下”移动( jQuery Portion , 此帖子的参考)。
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"> </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” (按红色框突出显示)中的值将行“向上”和“向下” 分组,而不是按行逐行移动。根据该图的示例,行的移动应被红色框移动。
所以我的问题是,如何使用jQuery选择器选择“列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
以获取值2和3,以查看其工作原理。
给定上面的表结构, 如果所有在B列中具有相同值的行都相邻 , 则可以制作一个映射存储(b列中的值,对应的tr
数组)对。 然后,当您单击Up / Down链接时,请分离所有具有相同值的行,并获得上方(对于Up )或波纹管(对于Down )的行。 然后,您知道在何处附加这些分离的行。
$(function() {
var column_index = 1;
function get_value(tr) {
return $('td', tr).eq(column_index).text().trim();
}
function group_by(trs, column_index) {
var map = {};
trs.each(function (idx) {
var value = get_value($(this));
if (map[value])
map[value].push($(this));
else
map[value] = [$(this)];
});
return map;
}
var map = group_by($('#Table1 tr:gt(0)'), column_index);
$('a.up').click(function () {
var tr = $(this).closest('tr');
var value = get_value(tr);
var group = map[value];
var prev = group[0].prev('tr');
if (prev.length == 0 || $('th', prev).length != 0)
return;
var prev_value = get_value(prev);
var prev_group = map[prev_value];
for (var i = 0; i < group.length; i++) {
group[i].detach();
prev_group[0].before(group[i]);
}
});
$('a.down').click(function () {
var tr = $(this).closest('tr');
var value = get_value(tr);
var group = map[value];
var next = group[group.length - 1].next('tr');
if (next.length == 0)
return;
var next_value = get_value(next);
var next_group = map[next_value];
for (var i = group.length - 1; i >= 0; i--) {
group[i].detach();
next_group[next_group.length - 1].after(group[i]);
}
});
});
请参阅jsFiddle上的代码示例。
如果您在服务器端动态生成表,则最好使用SQL或服务器端语言进行分组,并在tr
上附加一些类以标识组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.