Javascript 单击获取表行的id

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

请找到小提琴：

下面是我尝试的javascript：

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

功能测试（）{
警报（“称为测试”）；
var serviceID=$（this.attr（'id'）；
警报（“serviceID:：”+serviceID）；
}

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>

专栏1
专栏2
行1-数据1
行1-数据2
第2行-数据1
第2行-数据2

---

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

如果要使用jQuery，那么也要使用它的事件绑定

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

您将不再需要使用此代码段内联

onclick=test（）

这将查询class=nagivateTest的所有元素，并为它们分配一个单击处理程序。单击后，

此

将引用在回调内部单击的元素

原始代码不起作用的原因是全局回调中的

此

是

窗口

，与单击的当前元素无关

如果要将此代码包含在head或链接文件中，请确保将代码包装在ready回调中，以便已解析DOM并且

.navigateTest

元素可用。看起来是这样的：

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

---

摆脱内联事件处理程序并使用：

$（'.navigateTest'）。单击（函数（）{
警报（“称为测试”）；
var serviceID=$（this.attr（'id'）；
警报（“serviceID:：”+serviceID）；
})

专栏1
专栏2
行1-数据1
行1-数据2
第2行-数据1
第2行-数据2

专栏1
专栏2
行1-数据1
行1-数据2
第2行-数据1
第2行-数据2
功能测试（id）
{
var id=id；
}

这是一份工作清单

使用普通javascript，您可以仅在单击表时使用事件侦听器运行。使用事件监听器避免了内联javascript的需要，这被认为是一种不好的做法（如果可以避免的话），并导致代码更干净、更易于维护/读取。有关事件侦听器的详细信息，请阅读

<script>
    // get a reference to the table
    var table = document.querySelector('table');

    // listen for a click
    table.addEventListener('click', function(ev){
        // get the event targets ID
        var serviceID = ev.target.id;
        alert(serviceID);
    })
</script>

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

//获取对该表的引用
var table=document.querySelector（'table'）；
//听一听咔嗒声
表.addEventListener（'click'，函数（ev）{
//获取事件目标ID
var serviceID=ev.target.id；
警报（serviceID）；
})
专栏1
专栏2
行1-数据1
行1-数据2
第2行-数据1
第2行-数据2

看看这个：。它们很容易从jQuery访问，这是键盘无法访问的。将

s放入

s中，并将单击处理程序附加到按钮上。如果不传递参数，您的

onclick

函数无法访问

此

，因为我的应用程序不支持jquery，因此我们使用纯javascript实现这一点。谢谢。

var serviceID=$（this.attr（'id'）是jQuery。。。如果您正在使用，应用程序中如何不支持此功能？在普通JS中，它将是
var serviceID=this.id在我的应用程序中，它不工作。我认为jquery在我的应用程序中不支持。我们可以使用普通javascript实现这一点。请建议。谢谢。
<script>
    // get a reference to the table
    var table = document.querySelector('table');

    // listen for a click
    table.addEventListener('click', function(ev){
        // get the event targets ID
        var serviceID = ev.target.id;
        alert(serviceID);
    })
</script>

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