jQuery选择带有rowspan的表中的可视列 [英] jQuery select visual column in table with rowspan
问题描述
我看过几个类似的问题,但没有解决这个具体问题。请考虑下表:
I have seen a few similar questions but nothing that answers this specific problem. Consider the following table:
<table id="foo" border="1px">
<tr>
<td rowspan="2">one</td>
<td>two</td>
<td rowspan="2">three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td rowspan="2">two</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
<tr>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
</tr>
</table>
使用jQuery,我如何选择特定视觉列中的所有项目?例如,如果我想选择第3列,我应该将所有td与'3'作为内容。
Using jQuery, how can I select all items in a specific visual column? For example, if I want to select column 3, I should get all td's with 'three' as content.
推荐答案
Haven'看看发布的插件,但我发现这个问题很有趣,所以我创造了一个小提琴!
Haven't looked at the posted plugin, but I found the question interesting so I created a fiddle!
如果插件有效,它可能比这更好,但它是一个有趣的运动,所以我也可以发布它。
If the pluggin works it may be better than this, but it was a fun exercise so I may as well post it.
将 colToGet
更改为要突出显示的列。
Change colToGet
to whichever column you want to highlight.
$(function() {
var colToGet = 2;
var offsets = [];
var skips = [];
function incrementOffset(index) {
if (offsets[index]) {
offsets[index]++;
} else {
offsets[index] = 1;
}
}
function getOffset(index) {
return offsets[index] || 0;
}
$("#foo > tbody > tr").each(function(rowIndex) {
var thisOffset = getOffset(rowIndex);
$(this).children().each(function(tdIndex) {
var rowspan = $(this).attr("rowspan");
if (tdIndex + thisOffset >= colToGet) {
if(skips[rowIndex]) return false;
$(this).css("background-color", "red");
if (rowspan > 1) {
for (var i = 1; i < rowspan; i++) {
skips[rowIndex + i] = true;
}
}
return false;
}
if (rowspan > 1) {
for (var i = 1; i < rowspan; i++) {
incrementOffset(rowIndex + i);
}
}
});
});
});
这篇关于jQuery选择带有rowspan的表中的可视列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!