Comment obtenir une cellule spécifique d'un tableau par ses en-têtes ?

Question

Je veux obtenir le .html() d'une cellule de mon tableau en lançant jQuery en ne connaissant que ses attributs data-col et data-row. Voici le tableau :

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

Je ne sais pas comment construire ce sélecteur jQuery. quelque chose comme : $('table>tbody>tr[data-row=2] td') mais je n'arrive pas à comprendre

Merci pour votre aide

Answer 1

Démonstration de jsBin

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

Ou vous pouvez aussi le faire comme ça :

Démonstration

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

L'ingéniosité de la deuxième solution pourrait être beaucoup plus amusante si vous utilisiez également des numéros pour récupérer le 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

Une esquisse rapide d'une solution :

// 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();
}

Non testé et probablement bogué de diverses manières. Néanmoins, l'idée générale devrait être claire et facile à appliquer avec l'aide de la documentation de jQuery.

Answer 3

Si vous marquez les colonnes avec un index, cette solution pourrait être plus petite et plus rapide que la réponse de 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();
}

cette fonction fabriquera ce dont vous avez besoin.

Démonstration de JS Bin