8

在这个例子中：

<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是谁？）

4

3 回答 3

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/

于 2011-08-28T15:22:12.470 回答
1

<td>4</td>是第二个表的第一个孩子，所以你确实应该得到第 0 列。

与其详细说明检测行跨度等的复杂函数，不如为每个表格单元格分配 ID，或者为您的表格创建另一个自定义解决方案。例如，您提前知道每个特定行有多少列？或者您使用实际的背景颜色或“秘密”css 属性作为标识。

附言。在我理解实际问题之前，我无用的小提琴。

编辑（阅读下面的讨论）：如此处所述，您不应该创建自定义 css 属性；这些通常被浏览器忽略（并且不能通过 获得.attr()）。Sahar 的解决方案是标记受行合并影响的每个元素，以记住该元素应该计算多少列。

于 2011-08-28T16:26:20.907 回答
0

解决 rowspans 或 colspans 将非常复杂。我建议您遍历所有col-elements，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
    }
});
于 2016-02-05T13:48:59.853 回答