Javascript 获取表格行的 id onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27788570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get the id of the table row onclick
提问by user3684675
Requirement is to get the value of the id on click on any of the table row data.
要求是在单击任何表行数据时获取 id 的值。
Please find the fiddle : http://jsfiddle.net/T887t/55/
请找到小提琴：http: //jsfiddle.net/T887t/55/
Below is the javascript i tried:
下面是我试过的javascript：
<script>
function test(){
alert("test called");
var serviceID = $(this).attr('id');
alert("serviceID :: " + serviceID);
}
</script>
html code:
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>
Could not able to get the value of the id in javascript function. The value of the id is dynamic on my application. Please suggest.
无法在 javascript 函数中获取 id 的值。id 的值在我的应用程序中是动态的。请建议。
回答by Travis J
If you are going to use jQuery, then use its event binding as well
如果你打算使用 jQuery，那么也使用它的事件绑定
$('.navigateTest').click(function(){
alert("test called");
var serviceID = this.id;
alert("serviceID :: " + serviceID);
});
You will no longer need to inline onclick=test()with this snippet.
您将不再需要内联onclick=test()此代码段。
This will query for all of the elements with class=nagivateTest and assign a click handler to them. Once clicked, thiswill refer to the element clicked inside of the callback.
这将查询 class=nagivateTest 的所有元素，并为它们分配一个点击处理程序。单击后，this将引用在回调内部单击的元素。
The reason your original code does not work is because thisin the global callback is windowand will not relate to the current element clicked.
您的原始代码不起作用的原因是因为this在全局回调中window与单击的当前元素无关。
If you are going to include this code in the head or in a linked file, make sure to wrap the code in the ready callback so that the DOM has been parsed and the .navigateTestelements are available. That would look like this:
如果您打算将此代码包含在头部或链接文件中，请确保将代码包装在就绪回调中，以便 DOM 已被解析并且.navigateTest元素可用。那看起来像这样：
$(function(){ //jQuery shortcut for .ready (ensures DOM ready)
$('.navigateTest').click(function(){
alert("test called");
var serviceID = this.id;
alert("serviceID :: " + serviceID);
});
});
回答by tonyedwardspz
Here is a working jsFiddle.
这是一个有效的jsFiddle。
Using plain javascript you can use event listeners to run only when the table is clicked. Using event listeners avoids the need to inline javascript Which is considered bad practice (when it can be avoided) and results in cleaner and easier to maintain / read code. Read thisfor more information on event listener.
使用普通的 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>
回答by j08691
Get rid of the inline event handlers and use:
摆脱内联事件处理程序并使用：
$('.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>回答by DDeme
<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;
}
