[英]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.