Javascript Onclick со строками таблицы
У меня проблемы с кодом JScript. Я пытаюсь перебрать все строки в таблице и добавить событие onclick. Я могу добавить событие onclick, но у меня есть пара проблем.
Первая проблема заключается в том, что все строки в конечном итоге настраиваются с неправильным параметром для события onclick.
Вторая проблема в том, что это работает только в IE.
Вот отрывок кода ...
shanesObj.addTableEvents = function(){
table = document.getElementById("trackerTable");
for(i=1; i<table.getElementsByTagName("tr").length; i++){
row = table.getElementsByTagName("tr")[i];
orderID = row.getAttributeNode("id").value;
alert("before onclick: " + orderID);
row.onclick=function(){shanesObj.tableRowEvent(orderID);};
}}
shanesObj.tableRowEvent = function(orderID){
alert(orderID);}
Таблица находится в следующем месте ...
http://www.blackcanyonsoftware.com/OrderTracker/testAJAX.html
Идентификаторы каждой строки в последовательности ... 95, 96, 94 ...
По какой-то причине, когда вызывается shanesObj.tableRowEvent, onclick устанавливается для всех строк с последним значением id, которые прошли итерацию в цикле (94).
Я добавил несколько предупреждений на страницу, чтобы проиллюстрировать проблему.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Почему бы не прикрепить обработчик событий к таблице и не получить индекс строки ячейки, которая инициировала событие щелчка внутри обработчика щелчка.
Когда функция вызывается в javascript, первое, что происходит, - это то, что интерпретатор устанавливает цепочку областей видимости в состояние, в котором она находилась, когда функция была определена. В вашем случае цепочка областей видимости выглядит так:
GLOBAL
|
CAll addTableEvents
|
CALL onclick
Поэтому, когда интерпретатор javascript обнаруживает переменную номер заказа, он ищет эту переменную в цепочке областей видимости. Внутри вашей функции по щелчку не определено номер заказа, поэтому следующее место, которое нужно посмотреть, находится внутри addTableEvents. Вы могли бы подумать, что номер заказа определен здесь, но поскольку вы не объявили номер заказа с ключевым словом var, номер заказа стал глобальной переменной, поэтому номер заказа не находится внутри addTableEvents. Последнее место, которое нужно посмотреть, находится внутри GLOBAL, и, конечно же, оно там, и его значение - последнее, которое ему было присвоено, и в данном случае это последнее значение orderID = row.getAttributeNode ("id"). value; в цикле for.
Чтобы увидеть это более четко, посмотрите на следующие
shanesObj.addTableEvents = function(){
table = document.getElementById("trackerTable");
for(i=1; i<table.getElementsByTagName("tr").length; i++){
row = table.getElementsByTagName("tr")[i];
orderID = row.getAttributeNode("id").value;
alert("before onclick: " + orderID);
row.onclick=function(){var orderID = orderID; shanesObj.tableRowEvent(orderID);};
}
orderID = -1;
}
shanesObj.tableRowEvent = function(orderID){
alert(orderID);
}
Результатом щелчка здесь всегда будет -1.
Итак, чтобы обойти эту проблему, я предлагаю вам отбросить весь лишний и ненужный код и использовать что-то вроде следующего:
for(i=1; i<table.getElementsByTagName("tr").length; i++){
row = table.getElementsByTagName("tr")[i];
row.onclick=function(){shanesObj.tableRowEvent(this.id);};
}
Просто получите доступ к атрибуту id непосредственно из вызываемого объекта.
P.S. Понятия не имею, почему ваш код не работает в IE (он работал в моем IE7).
P.S. Теперь, когда код исправлен, это работает в Firefox и IE. Еще раз спасибо!
Просто примечание, чтобы добавить кое-что, что меня зацепило: если вы регулярно повторно генерируете свою таблицу, например, с помощью обычного опроса AJAX, не забывайте повторно добавлять слушателей каждый раз. Кроме того, похоже, что индекс должен начинаться с 0, если вы смотрите на «td» - не уверен, что это также относится и к «tr».
Вы не можете сделать это намного проще!
очевидно, может использоваться с динамически создаваемыми строками.
много любви,
сб.
<html>
<head>
<title></title>
<script language = "JavaScript" type = "text/javascript">
<!--
var TO,URL;
function Link(url){
URL=url;
TO=setTimeout('window.location=URL;',500);
}
//-->
</script>
</head>
<body>
<tr onclick = "Link('anotherpage.html');">
<td>row1 cell1</td>
<td>row1 cell2</td>
</tr>
<tr onclick = "Link('yetanotherpage.html');">
<td>row2 cell3</td>
<td>row2 cell4</td>
</tr>
</body>
</html>
Спасибо. Это сработало очень хорошо, и это также помогло мне понять проблему.