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 = ...
});

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 .


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

32

Obtenha COLUMN INDEX ao clicar:

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

Obtenha ROW INDEX ao clicar:

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

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

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

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.


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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.