得到表格行的id onclick

Question

要求是在点击任何表行数据时获取id的值.

请找小提琴:http://jsfiddle.net/T887t/55/

以下是我试过的javascript:

<script>
    function test(){
      alert("test called");
      var serviceID = $(this).attr('id');
      alert("serviceID :: " + serviceID);
    }
</script>

HTML代码:

<table border="1">
  <tr>
    <th><b> Column1 </b> </th>
    <th><b> Column2 </b> </th>
  </tr>
  <tr>
    <td class="navigateTest" id="88" onclick="test()"> Row1 - Data1 </td> 
    <td class="navigateTest" id="98" onclick="test()"> Row1 - Data2  </td>    
  </tr>
  <tr>
    <td class="navigateTest" id="33" onclick="test()"> Row2 -  Data1  </td> 
    <td class="navigateTest" id="55" onclick="test()"> Row2 - Data2  </td>    
  </tr>
</table>

无法在javascript函数中获取id的值.id的值在我的应用程序中是动态的.请建议.

Answer 1

如果您打算使用jQuery,那么也要使用它的事件绑定

$('.navigateTest').click(function(){
 alert("test called");
 var serviceID = this.id;
 alert("serviceID :: " + serviceID);
});

您将不再需要内联onclick=test()此代码段.

这将使用class = nagivateTest查询所有元素,并为它们分配一个单击处理程序.单击后,this将引用回调内部单击的元素.

原始代码不起作用的原因是因为this在全局回调中,window并且与单击的当前元素无关.

如果要将此代码包含在头部或链接文件中,请确保将代码包装在ready回调中,以便已解析DOM并且.navigateTest元素可用.这看起来像这样:

$(function(){ //jQuery shortcut for .ready (ensures DOM ready)
 $('.navigateTest').click(function(){
  alert("test called");
  var serviceID = this.id;
  alert("serviceID :: " + serviceID);
 });
});