Javascript 单击表格行时打开信息窗口

我试图从MySQL表中加载几个城市的id、名称和位置，然后将其填充到HTML表中。还有一个谷歌地图，上面有指向这些城市的标记

我希望当用户单击其中一个HTML行（tr标记）时，城市标记上会弹出一个信息窗口。我使用的是PHP、Javascript和XML，没有任何jQuery

我的HTML：

<?php
   $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
   $arrCities = mysql_query ($query);
?>

<div id="gmap" style="width: 550px; height: 450px"></div>

<table id="tblData">
   <tr>
       <th>ID</th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

正确的方法是什么

其他信息： 如果我将javascript更改为如下所示：

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { alert(tr.id); });

然后，当我单击该行时，警报框将弹出，但显示的ID将始终是最后一行的ID，无论我单击了哪一行。

---

谢谢

函数接受回调，但要保存变量状态，必须将其设置为闭包：

我认为这应该行得通

google.maps.event.addDomListener (tr, "click", 
(function(i){
    var row = i;
    return function(){
    RowClick(row);
    }
 })(i)
);

---

我根据Jason Kulatunga的回答编辑了我的问题。但它仍然不起作用：（谢谢。我忘记了这一点真是太蠢了。但它仍然不起作用。修改我的回调以成为闭包，应该保存你的“i”值状态。@JojoCook抱歉，我又进行了一次快速编辑，我忘记在内部存储状态。抱歉，我还有进一步的问题。希望你不介意。我使用ajax将HTML表设置为可排序。因此，当用户单击时th（id或名称），则所有行都将被重新创建。当然，这也会导致onClick事件消失。是否有任何方法重新分配它？谢谢。如果行被重新排序，DOMStener将不会以任何方式指向正确的行，因此我很确定您将需要重新运行它。抱歉

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { RowClick(i); });

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { alert(tr.id); });

google.maps.event.addDomListener (tr, "click", 
(function(i){
    var row = i;
    return function(){
    RowClick(row);
    }
 })(i)
);