2012-04-23 15 views
12

Tengo una tabla simple, donde he establecido ID para encabezados e ID para filas. Dado un ID para ambos, necesito encontrar una celda correspondiente en la intersección de esos dos.Buscar celda de tabla que conoce los identificadores de filas y columnas con jQuery

Ejemplo:

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

Así que si tengo id = "bli" y id = "DVA", eso significa que quiero hacer algo con célula que tiene el valor 5 en este ejemplo.

edit: Hay muchas respuestas correctas, las recargué todas, pero desafortunadamente solo puedo elegir una como correcta.

Respuesta

7

Aquí está mi solución:

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

Y ejemplo de trabajo en jsfiddle: http://jsfiddle.net/t8nWf/2/

añade todo en una función:

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

Ejemplo de trabajo: http://jsfiddle.net/t8nWf/5/

+2

cambie '$ ('# tablica'). Find ('thead'). Find ('# bli'). Index();' a '$ ('# bli'). Index()'. ¡mucho mas rápido! – binarious

+0

gracias y actualizado – WolvDev

3

Si tiene la identificación de la fila, puede seleccionar la columna que contiene los datos 5.

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

Consulte también this fiddle como ejemplo de trabajo.

EDITAR Sin conocer el id de la fila es suficiente con ID de la tabla, a continuación, también puede encontrar la célula:

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

Working example

+2

Creo que no conoce el valor de la TD (mi suposición). –

+0

Correcto, no sé valor de TD. – eagerMoose

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

debería funcionar. Ejemplo de trabajo: http://jsbin.com/acevon/edit#javascript,html,live

+0

Esto devuelve todos los TD en el objetivo TR. –

+0

No, no es así. Verifica jsbin. – binarious

+0

Supongo que lo arregló. La versión original no funcionó: http://jsfiddle.net/sMH5K/ –

1

Esto le dará el elemento TD desea como un objeto jQuery:

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

+0

'#tablica th # bli' es un selector bastante malo. Debido a que una identificación es única, puedes simplemente consultar '# bli'. – binarious

+0

Tienes razón, lo arregló. –

Cuestiones relacionadas