使用jQuery查找知道行和列id的表格单元格

时间:2012-04-23 09:28:42

标签: jquery html-table

我有一个简单的表,我为行设置了标题和ID的ID。给定两者的ID,我需要在这两者的交叉处找到相应的单元格。

示例:

<table id="tablica">
    <thead>
        <th id="bla">Bla</th>
        <th id="bli">Bli</th>
        <th id="blu">Blu</th>
    </thead>
    <tbody>
        <tr id="jedan">
            <td>1</td>            
            <td>2</td>
            <td>3</td>
        </tr>
        <tr id="dva">
            <td>4</td>            
            <td>5</td>
            <td>6</td>
        </tr>
        <tr id="tri">
            <td>7</td>            
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>​​​

所以如果我有id =“bli”和id =“dva”,那就意味着我想对这个例子中值为5的单元格做些什么。

编辑:有很多正确答案,我对所有这些答案都赞不绝口,但不幸的是我只能选择一个正确答案。

4 个答案:

答案 0 :(得分:9)

这是我的解决方案:

var column = $('#bli').index();
var cell = $('#dva').find('td').eq(column);

关于jsfiddle的工作示例:http://jsfiddle.net/t8nWf/2/

在函数中添加了所有内容:

function getCell(column, row) {
    var column = $('#' + column).index();
    var row = $('#' + row)
    return row.find('td').eq(column);
}

工作示例:http://jsfiddle.net/t8nWf/5/

答案 1 :(得分:3)

如果您已获得该行的ID,则可以选择包含数据5的列。

$("#dva").find("td:contains(5)").css({"background-color":"red"});

另请参阅this fiddle作为工作示例。

修改 如果不知道行的id,你只有id到表,那么你也可以找到单元格:

$("#tablica tr").find("td:contains(5)").css({"background-color":"red", "padding":"5px"});

Working example

答案 2 :(得分:2)

$('#dva > td').eq($('#bli').index()); // returns the td element

应该有效。工作范例: http://jsbin.com/acevon/edit#javascript,html,live

答案 3 :(得分:1)

这将为您提供您想要作为jQuery对象的TD元素:

var thIndex = $( '#tablica #bli' ).index (); // get index of TH in thead
var $td = $( $( '#dva td' ).get ( thIndex ) ); // get the TD in the target TR on the same index as is in the thead

JSFiddle example