在这个例子中:
<table border="1">
<col id="col0" style="background-color: #FFFF00"/>
<col id="col1" style="background-color: #FF0000"/>
<tr><td rowspan="2">1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
如何获得td 4的col的id?
如果我用这个jquery命令得到它的列号:
var cn = $(this).parent().children().index($(this));
cn将为0,但它的样式显示它属于col1 我需要一个像td.col.id
这样的推荐当我在td(例如td 4)上方的td处设置rowspan =“2”时,此td的列号将与其col(或colgroup)的顺序不同,并且我设置背景颜色以显示它。
修改 我相信有一种方法可以解决这个问题,因为当td知道它的col(colgroup)时,必须有一种方法可以从dom树的td询问它。 (Td4你展示了一个特定col的风格,谁是col?)
答案 0 :(得分:1)
首先必须计算td本身的列号。
这是通过在我们的td之前计算tds的数量来完成的;将colspan属性考虑在内:
function getElementColumn(td)
{
var tr = td.parentNode;
var col = 0;
for (var i = 0, l = tr.childNodes.length; i < l; ++i) {
var td2 = tr.childNodes[i];
if (td2.nodeType != 1) continue;
if (td2.nodeName.toLowerCase() != 'td' && td2.nodeName.toLowerCase() != 'th') continue;
if (td2 === td) {
return col;
}
var colspan = +td2.getAttribute('colspan') || 1;
col += colspan;
}
}
然后,您可以迭代col
元素并返回与列号匹配的元素。
我们首先要找到colgroup元素。然后它类似于计算td的列号:
function getCol(table, colNumber)
{
var col = 0;
var cg;
for (var i = 0, l = table.childNodes.length; i < l; ++i) {
var elem = table.childNodes[i];
if (elem.nodeType != 1) continue;
if (elem.nodeName.toLowerCase() != 'colgroup') continue;
cg = elem;
break;
}
if (!cg) return;
for (var i = 0, l = cg.childNodes.length; i < l; ++i) {
var elem = cg.childNodes[i];
console.log(elem);
if (elem.nodeType != 1) continue;
if (elem.nodeName.toLowerCase() != 'col') continue;
if (col == colNumber) return elem;
var colspan = +elem.getAttribute('span') || 1;
col += colspan;
}
}
使用这两个功能,您应该可以这样做:
var id = getCol(table, getElementColumn(td)).id;
function getElementColumn(td)
{
var col = 0;
$(td).prevAll('td, th').each(function() {
col += +$(this).attr('colspan') || 1;
});
return col;
}
function getCol(table, colNumber)
{
var col = 0, elem;
$(table).find('> colgroup > col').each(function() {
if (colNumber == col) {
elem = this;
return false;
}
col += +$(this).attr('span') || 1;
});
return elem;
}
答案 1 :(得分:0)
<td>4</td>
是第二个tablerow的第一个孩子,所以你确实应该得到第0列。
而不是详细说明检测rowpans等的复杂函数,建议只为每个表格单元分配id,或为表创建另一个自定义解决方案。 例如您事先知道每个特定行有多少列?或者您使用实际背景颜色或“秘密”css属性作为标识。
PS。在我理解实际问题之前,我无用fiddle。
编辑(阅读下面的讨论):
如here所述,您不应该创建自定义css属性;这些通常被浏览器忽略(并且不能通过.attr()
获得)。
Sahar的解决方案是标记每个受行合并影响的元素,以记住元素应该计算多少列。
答案 2 :(得分:0)
解决rowpans或colspans会非常复杂。我建议您迭代所有col
- 元素,为其设置宽度0px
并检查这是否会影响td
或th
元素的宽度。如果是这样,这是相关栏目。
示例:
// Your table elements
$table = $('yourTableSelector');
$cell = $('td or th');
$cols = $table.find('colgroup > col');
// determine the related col
// by setting a width of 0px. the
// resulting width on the element should be negative or zero.
// this is hacky, but the other way would
// be to resolve rowspans and colspans, which
// would be incredibly complex.
var $relatedColumn = $();
$cols.each(function(){
var $col = $(this);
var prevStyle = $col.attr('style') === 'string' ? $col.attr('style'): '';
$col.css('width', '0px');
if($cell.width() <= 0){
$relatedColumn = $col;
$col.attr('style', prevStyle); // reset
return false;
} else {
$col.attr('style', prevStyle); // reset
}
});