如何通過其標題獲取表格上的特定單元格？

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