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

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)   );

如果使用Numbers检索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