Linha da tabela e número da coluna no jQuery

141

Como obtenho o número da linha e da coluna da célula da tabela clicada usando jQuery, ou seja,

$("td").onClick(function(event){
   var row = ...
   var col = ...
});
Jonas
fonte

Respostas:

216

Você pode usar a função Núcleo / índice em um determinado contexto, por exemplo, pode verificar o índice do TD no TR pai para obter o número da coluna e pode verificar o índice TR na Tabela para obter o número da linha:

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

Veja um exemplo em execução aqui .

CMS
fonte
Por que falha na extensão da coluna @grom?
precisa saber é o seguinte
@Forkrul Assail, @CMS ROWSPAN's Falhou com jsbin.com/eyeyu/1099/edit#preview Clique na célula com o texto "12" . Índice de coluna deve ser 4
Andrew D.
Eu tenho alguns dados no "dados" variável ..... é possível acrescentar este "dados" na tabela com este col e valor de linha
shanish
2
ROWSPAN & COLSPAN trabalho ao redor: Isso faz com que o trabalho clique quando SPAN é usado jsbin.com/eyeyu/1307/edit
eddyparkinson
9
var row = $(this).closest('tr').index()
SpYk3HH 23/03
119
$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});
Phillip Senn
fonte
32

Obtenha COLUMN INDEX ao clicar:

$(this).closest("td").index();

Obtenha ROW INDEX ao clicar:

$(this).closest("tr").index();
Louie Santiano
fonte
21

Em cima da minha cabeça, uma maneira seria pegar todos os elementos anteriores e contá-los.

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});
Samantha Branham
fonte
6

Você pode gerar esses dados nas células enquanto cria a tabela?

para que sua tabela fique assim:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

então seria uma questão simples

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}
Chris Brandsma
fonte
1
Com quais especificações html esses atributos estão em conformidade? Não consigo encontrá-los.
Samantha Branham
5
Especificação HTML 5, que permite atributos personalizados começando com o prefixo 'data-'.
22420 Chris Brandsma
mesmo que eles não estão em especificação ele não vai quebrar navegadores mais antigos <HTML5
Daniel Powell
1
Você pode acessar os campos "dados" chamando: $ (this) .data ('row');
WhiteAngel
0

é melhor vincular um manipulador de cliques à tabela inteira e, em seguida, usar event.target para obter o TD clicado. Isso é tudo o que posso adicionar a isso como 1:20.

mkoryak
fonte
Embora essa possa ser uma dica valiosa para resolver o problema, uma boa resposta também demonstra a solução. Por favor edite a fornecer exemplo de código para mostrar o que você quer dizer. Como alternativa, considere escrever isso como um comentário.
precisa
1
Obrigado, vou considerar uma revisão esta resposta em mais 10 anos
mkoryak