Javascript Onclick со строками таблицы - PullRequest
Новая
       14

Javascript Onclick со строками таблицы

3 голосов
/ 18 января 2009

У меня проблемы с моим кодом 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, онклик устанавливается для всех строк с последним идентификатором значения, прошедшим итерацию в цикле (94).

Я добавил несколько предупреждений на страницу, чтобы проиллюстрировать проблему.

Ответы [ 3 ]

3 голосов
/ 18 января 2009

Когда функция вызывается в javascript, первое, что происходит, - это то, что интерпретатор устанавливает цепочку области видимости в состояние, в котором она была при определении функции. В вашем случае цепочка областей выглядит так: 

   GLOBAL
     |
CAll addTableEvents 
     |
CALL onclick

Поэтому, когда переменная orderID наткнулась на интерпретатор javascript, она ищет в цепочке областей действия эту переменную. В вашей функции onclick не определено orderID , поэтому следующая точка поиска находится внутри addTableEvents . Вы могли бы подумать, что orderID определен здесь, но поскольку вы не объявили orderID с ключевым словом var, orderID стал глобальной переменной, поэтому orderID не найден внутри 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).

2 голосов
/ 18 января 2009

Почему бы не присоединить обработчик событий к таблице и захватить индекс строки ячейки, которая инициировала событие click внутри обработчика щелчка.

0 голосов
/ 21 марта 2010

Вы можете получить намного проще, чем это!
очевидно, может использоваться с динамически построенными строками.
много любви,
сб. 

<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>
...