Question

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

以下是我试过的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);
 });
});

Answer 2

这是一个有效的jsFiddle。

使用普通javascript，您可以使用事件侦听器仅在单击表时运行。使用事件监听器避免了内联javascript的需要这被认为是不好的做法（当它可以避免时）并且使得更清晰，更容易维护/读取代码。有关事件监听器的更多信息，请阅读this。

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

Answer 3

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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>

Answer 4

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

function test(id)
{
var id = id;
}

得到表格行的id onclick

4 个答案: