獲取表格行的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並提供可用的元素。這將是這樣的：

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

Answer 2

擺脫內聯事件處理程序和使用範圍：

$('.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 3

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

Answer 4

這裏是一個工作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>