查找其中一个单元格或者td的colSpan标头是Spans

时间:2012-04-25 19:17:32

标签: javascript jquery html css

我有多个列标题,跨越多列,我想找到列的正确标题号/计数。

我想输入一个列号并获取标题:示例第5列是RDataTest6 $('td.eq(5)),其标题是HTest3 $('th.eq(2))


示例:

<table>
    <tr>
        <th>HTest1</th>
        <th colSpan="2">HTest2</th>
        <th colSpan="4">HTest3</th>
        <th colSpan="2">HTest4</th>         
    </tr>
    <tr>
        <td>RDataTest1</td>
        <td>RDataTest2</td>
        <td>RDataTest3</td>
        <td>RDataTest4</td>
        <td>RDataTest5</td>
        <td>RDataTest6</td>
        <td>RDataTest7</td>
        <td>RDataTest8</td>
        <td>RDataTest9</td>
    </tr>
</table>

2 个答案:

答案 0 :(得分:1)

编辑:你应该实现一个包含标题位置的简单数组,见下文

var thLocator = [], colCount = 1;
$table.find('tr:first th').each(function () {
    for (var i = 0; i < this.colSpan; i++) {
        thLocator.push(colCount);
    }
    colCount++;
});

$table.find('td').click(function () {
    alert(thLocator[$(this).index()]);
});

然后随时可以获取td列的位置。见DEMO - &gt;点击任何TD以确定其col头位置。


我不确定你想要哪个数,所以我写了所有的col数。见DEMO

$(function() {
    var $table = $('table');

    alert('Table Header Count ' + $table.find('tr:first th').length);

    var thCount = 0;
    $table.find('tr:first th').each(function () {
        thCount += this.colSpan;
    });

    alert('Computed TH Count ' + thCount );

    alert('Table TD Col Count ' + $table.find('tr:eq(1) td').length);
});

答案 1 :(得分:0)

只要您没有任何rowspan s:

,这很容易
function getCell(tr, col) {
    var cell = tr.firstElementChild;
    while (cell && (col -= cell.colSpan || 1)>=0)
        cell = cell.nextElementSibling;
    return cell;
}

请参阅demonstration