Получить идентификатор функции (этого) td element

Question

Я отправляю TD через функцию, но я не могу взаимодействовать с идентификатором.

HTML:

<tr> 
    <td id="1" onclick="move(this);"></td> 
    <td id="2" onclick="move(this);"></td> 
    <td id="3" onclick="move(this);"></td> 
</tr> 

JS:

function move(td) { 
    //I want the ID of this td that I've captured by "this" 
    var tdId = td.id; //<--- This doesn't works 

    var tds = document.getElementsByTagName('td'); 
    for (var td in tds) { 
      if (tds[td].innerHTML == "last") { 
       tdFinal = tds[td]; 
      } 
    } 
    alert(tdFinal.id); //<---- This works fine 
} 

Answer 1

Для меня это работает просто отлично :)

Вот скрипку: http://jsfiddle.net/4P3jF/

var move = function(td) { 
//I want the ID of this td that I've captured by "this" 
var tdId = td.id; //<--- This doesn't works 

alert(tdId); 

}

Answer 2

Ваше первое заявление работает отлично!

Я сделал скрипку с примером: http://jsfiddle.net/8tgVq/2/

(проверить вашу консоль для вывода!)

В HTML:

<table> 
    <tr> 
     <td id="1" onclick="move(this);">a</td> 
     <td id="2" onclick="move(this);">b</td> 
     <td id="3" onclick="move(this);">c</td> 
    </tr> 
</table> 

JS:

function move(td) { 
    console.log(td.id); 
} 

Выход:

не

1 
2 
3 

Answer 3

Let's start with a jsbin.com demo. People love demos.

---

Несколько вещей, которые должны быть решены:

1. HTML Идентификаторы должны начинаться с буквы

Это больше не является обязательным требованием в HTML 5, но вы все равно должны это сделать. Read more about the id attribute here

Если вы хотите прикрепить данные к элементу, вы должны использовать атрибут data-*. Read more about data-* attributes here

<table id="my-table"> 
    <tr> 
     <td data-id="1"></td> 
     <td data-id="2"></td> 
     <td data-id="3"></td> 
    </tr> 
</table> 

2. Ненавязчивый JavaScript

я удалил onclick атрибуты в пользу принятия более unobtrusive подхода. Я прикрепил простой id к элементу table, чтобы упростить таргетинг на конкретные элементы td, о которых мы заботимся.

// our move function 
function move(elem) { 
    console.log(elem.getAttribute("data-id")); 
} 

// our click listener 
function onClick(event) { 
    move(this); 
    event.preventDefault(); 
} 

// get our table's td elements 
var table = document.getElementById("my-table"); 
var tds = table.getElementsByTagName("td"); 

// loop through each td and add a click listener 
for (var i=0, len=tds.length; i<len; i++) { 
    tds[i].addEventListener("click", onClick); 
} 

---

добавить щепотку CSS, чтобы сделать td элементы появляются интерактивными

#my-table td { 
    cursor: pointer; 
}