如何获取一个td元素的列id（而不是列编号）？

Question

在这个例子中：

<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的列id？

如果我使用以下jQuery命令获取其列号：

var cn = $(this).parent().children().index($(this));

cn将会是0，但它的样式表明它属于col1，我需要一个像td.col.id这样的命令

当我在上面的td（例如td4）设置rowspan =“2”时，此td的列号将与其col（或colgroup）的顺序不同，并且我设置背景颜色以显示它。

编辑： 我相信有一种解决这个问题的方法，因为当td知道它的col（colgroup）时，必须有一种从dom树中的td中询问它的方法。（Td4你显示特定col的样式，那个col是谁？）

- sahar

Answer 1

首先，您必须计算 td 元素本身的列号。

这是通过计算我们的 td 元素之前的 td 元素数量来完成的；考虑到 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;

http://jsfiddle.net/wHyUQ/1/

jQuery 版本

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;
}

http://jsfiddle.net/wHyUQ/2/

- Arnaud Le Blanc

---

我对colspan没有问题，我的问题在于rowspan。如果您考虑我的示例并在您分享的链接中检查它，它将为td 4说col0，因此是错误的。 - sahar

哇，仅仅是为了找到相应的td的col，比我想象的要复杂得多！ - Michael

Answer 2

<td>4</td> 是第二个表格行的第一个子元素，所以您确实应该获取列0。

与其阐述检测行合并等复杂函数，不如为每个表格单元格分配ID或创建另一种自定义解决方案。例如，您预先知道每个特定行具有多少列？或者使用实际背景颜色或“秘密”CSS属性作为标识。

附：在我理解实际问题之前，我的fiddle毫无用处。

编辑（请参阅下面的讨论）： 正如这里所描述的那样，您不应该创建自定义CSS属性；这些属性通常被浏览器忽略（并且无法通过.attr()获得）。Sahar的解决方案是标记每个受影响的元素，以记住元素应计数多少列。

- Remi

---

事实上，我正在尝试创建一个HTML表格生成器，当用户想要合并td 1、2和4（或套索选择这些td）时，我遇到了这个问题。我不仅使用背景颜色，还使用col标签的一些自定义属性来定义数据结构。毕竟，我相信有一种方法可以解决这个问题，因为当td知道它的col（colgroup）时，必须有一种方法从td中询问它（Td4您显示了col的样式，那个col是谁？）。 - sahar

准确地说，浏览器根据列知道应该应用什么样式，那么为什么不为每一列（除了颜色之外）制定一个特定的样式属性，这在您的情况下不会触发任何视觉变化，例如从这些中选择任何一个包含数字且可行的属性。 - Remi

你接受了我的答案（谢谢！）为了完整起见，我可以问一下你选择了哪个CSS属性吗？ - Remi

我在col标签的样式属性中添加了一个自定义属性（例如colName），并且td继承了这个属性，因此我可以通过IE中的currentStyle和Firefox中的getComputedStyle()来知道每个td的col。 - sahar

我会继续思考更好的解决方案：它似乎在Chrome中不起作用，自定义属性经常被忽略，请参见这里。 - Remi

是的，更大的问题是没有正确的currentStyle或有关动态生成的HTML标记的任何内容。最后，在每次垂直合并后，我会向td4（rowspan下面的td）添加一个属性，显示它代表2个td（或2列）。 - sahar

Answer 3

解决行合并或列合并将非常复杂。我建议您迭代所有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
    }
});

- dude