Получить идентификатор ячейки таблицы

Question

У меня есть html-стол, который на самом деле является шахматной доской. Что-то вроде:

<table id="chessboard"> 
    <tr> 
     <td id="A8"></td> 
     <td id="B8"></td> 
     <td id="C8"></td> 
    <tr> 
    <tr> 
     <td id="A7"></td> 
     <td id="B7"></td> 
     <td id="C7"></td> 
    <tr> 
    <tr> 
     <td id="A6"></td> 
     <td id="B6"></td> 
     <td id="C6"></td> 
    <tr> 
</table> 

Теперь я пытаюсь сделать скрипт JQuery, который возвращает идентификатор соты (т.е. «A8», «B6», и т.д.) один раз один clickes в любом месте в таблице (шахматная доска). Я много пробовал, но я не могу заставить его работать.

Одна из вещей, которые я пробовал:

$("#chessboard").on("click", function(cell){ 
    alert(cell.target).attr("id")); 

}) 

Кто-нибудь есть решение?

Answer 1

Try:

$("#chessboard td").on("click", function(cell){ 
 
    alert(this.id); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="chessboard"> 
 
    <tr> 
 
     <td id="A8">A8</td> 
 
     <td id="B8">B8</td> 
 
     <td id="C8">C8</td> 
 
    <tr> 
 
    <tr> 
 
     <td id="A7">A7</td> 
 
     <td id="B7">B7</td> 
 
     <td id="C7">C7</td> 
 
    <tr> 
 
    <tr> 
 
     <td id="A6">A6</td> 
 
     <td id="B6">B6</td> 
 
     <td id="C6">C6</td> 
 
    <tr> 
 
</table>

Answer 2

Попробуйте что-то вроде ...

$('#chessboard').click(function() { 
    alert($(this).attr('id')); 
}); 

'это' работает как шарм.

Также не забывайте ссылаться на скрипт Jquery где-то в документе:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 3

cell.target в данном случае относится к элементу DOM, который отправлял событие. Элементы DOM не имеют метода .attr(), то есть метода объекта jQuery.

Чтобы использовать его, вам нужно сначала обернуть ваш DOM-элемент в объекте JQuery:

$("#chessboard").on("click", function(e){ 
    $cell = $(e.target); 
    alert($cell.attr('id')); 
}); 

придираться: Вызов event что-то соответствующее, а не cell. Это вас просто смутит.

Answer 4

Попробуйте этот Mate

$("#chessboard tr").on("click","td", function(cell){ 
     alert(this.id); 
    }) 

это пример на JSFIDDLE

Answer 5

Спасибо за ответы. У меня есть ответ.

Это сработало:

$("#chessboard td").on("click", function(cell){ 
    alert(this.id); 
})