We Keep Coding

Selecting table rows with jquery, but also selecting rows when clicking button, how do I prevent this?

When you click on a table row it adds a class that changes it's appearance to reflect it's selected.
$('#my_table tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
However, I also have some buttons in a column that let you do things specific to the row:
Item Amount Action
--------------------------------
Apple 10 [Buy] [Delete]
Banana 5 [Buy] [Delete]
Orange 14 [Buy] [Delete]
When I click one of the individual buttons, it also triggers the table row '.selected' class to be added, but I don't want this to occur when clicking buttons.

You can use Event​.stop​Propagation() on button click:
$('#my_table tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#my_table tbody').on( 'click', 'button', function (e) {
e.stopPropagation();
});
.selected{
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
<thead>
<th>Item</th>
<th>Amount</th>
<th>Action</th>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td><button>[Buy]</button><button>[Delete]</button></td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td><button>[Buy]</button><button>[Delete]</button></td>
</tr>
<tr>
<td>Orange</td>
<td>14</td>
<td><button>[Buy]</button><button>[Delete]</button></td>
</tr>
</tbody>
</table>

You can use stopPropagation() or preventDefault() on buttons onclick event. This will prevent event bubling to parent elements of button (td, tr, table and so on). Assuming your buttons class as 'row-button' following is a sample code:
$('.row-button').on('click', function(event)){
event.stopPropagation();
//Do what are intended upon button click.
}

You might make sure that the td being clicked on is not in the column with the buttons. With :not, you can ensure that the matched element doesn't match a particular selector, and with :nth-child, you can specify the 3rd td in its container as the one to be excluded:
$('#my_table tbody').on('click', 'tr td:not(:nth-child(3))', function() {
console.log('click registered');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
<tr>
<td>td 1</td>
<td>td 2</td>
<td><button>button</button></td>
</tr>
</table>

You are experiencing a feature of the DOM called Event Propagation.
What you want to do is prevent this from occurring by calling Event.stopPropagation() in the handlers for your <td> clicks
To stop propagation with a jQuery event handler, simply return false on the last line of your td click handlers.

delegate checkbox within my table row

<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>453</td>
<td>Nick James</td>
<td>12/9/2016</td>
</tr>
</tbody>
JS
$('body').on('click','#myTable tbody',function(e){
alert('do something');
});
I have checkbox within my table row, how do I delegate it form above's click event? I do not want the event to be occur when I click on the checkbox.

To perform the functionality only when target type is not checkbox
$(document).ready(function(){
$('body').on('click','#myTable tbody',function(e){
if(e.target.type!='checkbox')
alert('do something');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>453</td>
<td>Nick James</td>
<td>12/9/2016</td>
</tr>
</tbody>
</table>

You can check if the target is checkbox and prevent further execution:
$(document).ready(function(){
$('body').on('click','#myTable tbody',function(e){
if($(e.target).is(':checkbox'))
{
return;
}
alert('do something');
});
})
Check this Fiddle

Use stop event.stopPropagation() to prevent the click on inner element to bubble across the parents.
$('body').on('click','#myTable tbody input[type="checkbox"]',function(event){
event.stopPropagation();
});
$('body').on('click','#myTable tbody',function(e){
alert('do something');
});
Now the alert will come only when you click on anywhere inside the table, which is not a input[type="checkbox"].

try this
You can use Jquery not and has selectors to achieve this
$('body').on('click','#myTable tbody td:not("td:has(input[type=checkbox])")',function(event){
alert('do something');
});
Working FIDDLE

jquery - get the value of <tr> in a html table

I have a AJAX created table.
And I need to call a ajax request on the those table which was created through ajax.
Through this I figured out to call the click function on dynamically created HTML element.
Table looks similar like this.
<table>
<thead>
<th>Sr. No</th>
<th>Label</th>
</thead>
<tbody>
<tr value="1">
<td>1.</td>
<td>One</td>
</tr>
<tr value="2">
<td>2.</td>
<td>Two</td>
</tr>
</tbody>
</table>
I've assigned value to the tr and now I want to create another ajax request on click of the tr. And based on the value I'm running a query to get the data.
Challenge I'm facing is that I'm not able to get the value of the tr.
Here's the code I tried with.
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).val())
})
})
Here's the fiddle.
Even in the fiddle I'm unable to get the value of a tr.
Please help me to find where I'm going wrong.
Thanks in advance.

You can use .attr() instead:
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).attr('value'))
})
})
Updated Fiddle
but actually you should use data-* HTML5 attribute:
<tr data-value="1">
then retrieve it using .data():
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).data('value'))
})
})
Updated Fiddle

$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).attr("value"));
})
})
see http://jsfiddle.net/tqQm5/4/

Use text() property of tr instated of val() property.
see this Fiddle
see this code
$(document).ready(function() {
$('.table').on('click', 'table tbody tr', function() {
alert($(this).text())
})
})

Try this use.attr()
alert($(this).attr("value"));

Making table row clickable in jsp

I am having table rows and I want to make the whole row clickable.So to do it I right the following ajax code :
$(document).ready(function() {
$('#myrow').click(function ()
{
//alert("hi");
$.ajax({
type: "post",
url: "shownotification.jsp",
data: {
notifyidd: $('#notifyidd').val(),
notifyuser: $('#notifyuser').val()
},
success: function(msg){
//if(msg == "success")
alert('Data updated.');
window.location.reload();
}
});
});
});
But the problem is that it just make my first row clickable, and all other are still not.
What can be the reason? Please help.

Seem like currently you're having duplicated id for your tr, try to apply class instead:
<tr class="myrow" ......
then you can use . to target elements by class:
$(document).ready(function() {
$('.myrow').click(function () {
// Your code here
});
});

bind you code with on and also done with previous code
HTML
<table>
<tbody>
<tr class="myrow">.......
</tr>
</tbody>
</table>
jQuery
you can try two method
$(document).ready(function() {
$('.myrow').click(function ()
{
//your stuff
});
/***or can try this below method**/
$('table').on('click', 'tr', function() {
//your stuff
});
});

Try this
$(document).on('click', '#table-id tr', function() {
alert('Hello');
});

In Your Code you are giving click event on id
i.e. $('#myrow').click(function ()
So it is no working because id of div must be unique. change your rows id with class name then it will work fine
$('.myrow').click(function ()
Refer below link for reference
Demo Link
Table HTML is
<table style="width:300px">
<tr class="tableRow">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="tableRow">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="tableRow">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
Script for click event
$(".tableRow").click(function(e){
alert("Table Tr Clicked");
});

How to handle a TR click without the first and last TD

I have a Datatables Table with some random values in it. I would like to create a popup when the client clicks on the TR itself, but NOT on the first and the last TD of the table.
<table class="table href="#popup">
<tr id="tr1">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="tr2">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="tr3">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
<tr id="tr4">
<td><input type="checkbox"></td>
<td>Test1</td>
<td>Test1</td>
<td><input type="checkbox"></td>
</tr>
</table>
My popup plugin works like, if an href link is called and the popup div's id equals to that href value, it automatically pops up.
However if someone clicks on the first or the last TD do NOT want the popup to activate. Is it actually possible to achieve this somehow?
(The following solution should not be mentioned, because it would make the code look like a mess literally: if I select all the TD fields without the first and last, and add a href attribute to all of the selected TD elements.)
Any other suggestions are welcomed!

When you click, the event is propagated from the child nodes to the parent nodes (learn more here).
You can disable event propagation in both td:first-child and td:last-child elements inside your table in order to prevent your tr event handler from being reached.
I'd also suggest you to use event delegation to keep better performance.
$('.table').on('click', 'tr', function() {
alert('show popup');
});
$('.table').on('click', 'td:first-child, td:last-child', function(e) {
e.stopPropagation();
});
FIDDLE: http://jsfiddle.net/6QTrL/1/

Just use this:
Using :first-child and :last-child with not()
$('table tbody tr td').not(":first-child").not(":last-child").click(function(
//This will only be triggered on the td that are not the first or the last on a tr
))

Here's a fiddle to accomplish that - First and Last row now clickable
I have the first and last row throwing an alert but that's just to give you an idea of how to target them.
$(function(){
var tableRows = $('table').find('tr');
$('table').on('click', 'tr', function(){
if (this == tableRows[0])
alert('first row');
else if (this == tableRows[tableRows.length - 1])
alert('last row');
else
alert('somewhere in the middle');
});
});
The code below is probably more along the lines of what you're looking for. I made the code above in the fiddle so I just pasted that as well.
$(function(){
var tableRows = $('table').find('tr');
$('table').on('click', 'tr', function(){
if (this != tableRows[0] && this == tableRows[tableRows.length - 1])
alert('somewhere in the middle');
});
});