如何通过其标题获取表格上的特定单元格？

Question

我想要得到我的表的一个单元格的.html（）抛出jQuery只知道它的data-col和data-row属性。这是表：

<table> 
    <tr> 
     <td></td> 
     <th data-col="A">Mon</th><th data-col="B">Tue</th> 
     <th data-col="C">Wen</th> 
    </tr> 
    <tr> 
     <th data-row="1">Mon</th> 
     <td>Something</td> 
     <td>Something</td> 
     <td>Somthing</td> 
    </tr> 
    <tr> 
     <th data-row="2">Mon</th> 
     <td>Something</td> 
     <td>Something</td> 
     <td>Somthing</td> 
    </tr> 
    <tr> 
     <th data-row="3">Mon</th> 
     <td>Something</td> 
     <td>Something</td> 
     <td>Somthing</td> 
    </tr> 
</table> 

我不知道如何建立这个jQuery选择 财产以后这样的：$('table>tbody>tr[data-row=2] td')但我无法弄清楚

感谢您的帮助

Answer 1

jsBin demo

function getTD(col, row){ 

    var rowIdx = $('[data-row='+row+']').parent('tr').index() ; 
    var colIdx = $('[data-col='+col+']').index() -1; 

    return $('tr:eq('+rowIdx+') td:eq('+colIdx+')').html() ; 
} 

alert( getTD('A', '2') ); 

或者你也可以不喜欢它：

demo

function getTD(c,r) { 

    var col = {A:1, B:2, C:3}; // add more if needed 

    var colLen = $.map(col, function(n, i) { return i; }).length; 
    var cc = colLen*(r-1) + col[c]; 
    return $('table').find('td').eq(cc).html(); 

} 

alert( getTD('B', 3) ); 

第二个解决方案的聪明可能是，如果你使用的数字太检索COL更有趣：

function getTD(col,row) {  
    var ind = (row-1)*3 + col; // 3 is the max N of Cols 
    // 'ind' holds the exact index number of our desired TD from our .find() collection 
    return $('table').find('td').eq(ind).html();  
} 

// getTD(COL, ROW) 
alert( getTD(2, 3) ); 

Answer 2

速写的解决方案：

// Param table: the <table> DOM element, 
// Param col: the string identifying the column, 
// Param row: the string identifying the row 
function(table, col, row) { 
    col_number = $(table).find("tr").first().find("th[data-col=" + col + "]").index(); 
    row_number = $(table).find("th[data-row=" + row + "]").parent().index(); 
    return $(table).find("tr").eq(row_number).find("td").eq(col_number).val(); 
} 

未经测试，可能有多种方式的越野车。不过，在jQuery文档的帮助下，总体思路应该清晰易懂。

Answer 3

如果您将标记cols与索引，该解决方案可能比Confusion的答案更小，更快。

/** 
param table - DOM element of table 
param row - row index 
param col - col index 
*/ 
function getData(table, row, col) { 
    return $(table).find('tr:nth-child('+(row+1)+')').find('td:nth-child('+(col+1)+')').html(); 
} 

此功能将使你所需要的。

JS Bin Demo