Get table row id onclick
The requirement is to get the identifier value when clicking on any of the table row data.
Find the fiddle: http://jsfiddle.net/T887t/55/
Below is the javascript I've tried:
<script>
function test(){
alert("test called");
var serviceID = $(this).attr('id');
alert("serviceID :: " + serviceID);
}
</script>
html code:
<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>
Can't get id value in javascript function. The id value is dynamic in my application. Please suggest.
source to share
If you are going to use jQuery use event binding as well
$('.navigateTest').click(function(){
alert("test called");
var serviceID = this.id;
alert("serviceID :: " + serviceID);
});
You won't need to embed onclick=test()
with this snippet anymore .
This will request all elements with class = nagivateTest and assign a click handler to them. Once clicked this
will refer to the element clicked inside the callback.
The reason your original code is not working is because this
in the global callback window
and does not refer to the current item clicked.
If you're going to include this code in a head or in a linked file, be sure to wrap the code in a ready-made callback so that the DOM is parsed and the elements are available .navigateTest
. It will look like this:
$(function(){ //jQuery shortcut for .ready (ensures DOM ready)
$('.navigateTest').click(function(){
alert("test called");
var serviceID = this.id;
alert("serviceID :: " + serviceID);
});
});
source to share
This is where the jsFiddle works .
Using simple javascript, you can use event listeners to only fire when the table is clicked. Using event listeners avoids the need for inline javascript. This is considered bad practice (when it can be avoided) and results in cleaner and easier to maintain / read code. Read this for more information on the event listener.
<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>
source to share
Get rid of the built-in 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>
source to share
<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;
}
source to share