Javascript 如何获取td的列id(而不是td的列号)?
在本例中:Javascript 如何获取td的列id(而不是td的列号)?,javascript,html,dom,html-table,col,Javascript,Html,Dom,Html Table,Col,在本例中: <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></
<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>
cn将为0,但其样式显示它属于col1
我需要一个像td.col.id这样的证件
当我在td上方的td处设置rowspan=2时,例如td 4,该td的列号将不同于它的颜色列组顺序,我设置背景色来显示它
编辑:
我相信有一种方法可以解决这个问题,因为当td知道它的colcolgroup时,一定有一种方法可以在dom树上向td询问。Td4显示特定列的样式,该列是谁?首先必须计算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;
}
}
通过这两个功能,您应该能够做到这一点:
var id = getCol(table, getElementColumn(td)).id;
jQuery版本
4是第二个tablerow的第一个子级,因此您确实应该得到第0列
与其详细说明检测行跨度等的复杂函数,不如只为每个表单元格分配ID,或者为表创建另一个自定义解决方案。
e、 g.您提前知道每行有多少列?或者使用实际背景色或“机密”css属性作为标识
在我了解实际问题之前,我的工作毫无用处
编辑阅读下面的讨论:
如上所述,您不应该创建自定义css属性;这些内容通常被浏览器忽略,无法通过.attr访问。
Sahar的解决方案是标记受行合并影响的每个元素,以记住该元素应计算多少列。解析行跨度或列跨度将非常复杂。我建议您迭代所有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
}
});
我对colspan没有问题,我的问题是rowspan。如果你考虑我的样本并在你共享的链接中检查它,它会说TD 4的COL0,所以它是错误的。哇,它比我想象的复杂得多,简单地找到相应的TD的COL!事实上,我正在尝试创建一个html表生成器,当用户想要合并TD1、2和4或lasso选择这些tds时,我会遇到这个问题,我不仅使用背景色,还使用col标记的一些自定义属性来定义数据结构。毕竟,我相信有办法解决这个问题,因为当td知道它的colcolgroup时,一定有办法向td询问。Td4如果你显示一个列的样式,谁是该列?确切地说,浏览器知道根据列应用什么样式,所以为什么不为每列指定一个样式属性,而不是颜色,这不会在你的情况下触发任何视觉变化,例如,任何包含数字的样式属性都可以。你接受我的回答谢谢!为了完整起见,我可以问一下您选择了什么css属性吗?我在col标签的style属性中添加了一个自定义属性,例如colName,td在这个属性中写入,这样我就可以通过IE中的currentStyle和firefox中的getComputedStyle知道每个td的col。不过我会继续考虑一个更好的解决方案:它在Chrome中似乎不起作用,自定义属性通常被忽略,请参见
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;
}
// 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
}
});