Prevent Hyperlink to trigger Jquery? - javascript

I wrote this script so that if a user clicks on any <TR>, it gets highlighted - this is working fine and it highlights the TR fine.
<script>
$(document).ready(function () {
$(document).on('click', 'tbody tr', function (e) {
e.stopPropagation();
$(this).toggleClass('selected');
});
});
</script>
Now the issue is my <tr> has a hyperlink inside it and when user clicks on that hyper before the redirect the <tr> gets highlighted
<tr>
<td >
<div class="header">
TITLE HERE
</div>
</td>
</tr>
How to prevent that happening
Cheers
$(document).ready(function () {
$(document).on('click', 'tbody tr', function (e) {
e.stopPropagation();
$(this).toggleClass('selected');
});
});
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
Link
</tr>
</thead>
<tbody id="trow">
<tr>
<td style="Width:500px" >
<div class="header">
TITLE HERE
</div>
</td>
</tr>
</tbody>


First change 'tbody tr' to 'tbody tr a'
Second then to set the class on the tr use .closest() as in $(this).closest("tr").toggleClass('selected')
Demo
$(document).ready(function() {
$(document).on('click', 'tbody tr', function(e) {
if (e.target.nodeName == "A") {
e.stopPropagation();
} else {
$(this).closest("tr").toggleClass('selected');
}
});
});
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
Link
</tr>
</thead>
<tbody id="trow">
<tr>
<td style="Width:500px">
<div class="header">
TITLE HERE
</div>
</td>
</tr>
</tbody>


You need to listen to the click of a and stop the propagation in order to prevent highlighting of the row:
$(document).ready(function() {
$("table").on('click', 'tbody tr a', function(e) {
event.stopPropagation();
});
$(document).on('click', 'tbody tr', function(e) {
$(this).toggleClass('selected');
});
});
.selected {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr style="height: 100px;">
<td>
<div class="header">
TITLE HERE
</div>
</td>
</tr>
</tbody>
</table>

Related

how to highlight row on mouse click?

I have a table with rows of data. I am able to highlight the table when the checkbox is checked. I would like to enable the highlight and enable the checkbox on a mouse click over the table. the problem with my code now is that when I click on the check box its triggers the event for the mouse click to as the check box is part of the <tr> how can I fix this.
$('.form-check-input').on('click', function() {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.attr("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.attr("checked", true);
$(this).addClass("rowColor");
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

Issue with above code is when checkbox clicked it also trigger parent element click event. you can stop that by calling stopPropagation() for event. here is updated code
$('.form-check-input').on('click', function(e) {
e.stopPropagation();
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
$('.form-check-input').trigger("click");
return;
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td>test</td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

You had two events overlap each other because the checkbox click was bubbling to the tr click. I added e.stopPropagation(); to keep it from happening.
$('.form-check-input').on('click', function(e) {
e.stopPropagation();
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function() {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.attr("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.attr("checked", true);
$(this).addClass("rowColor");
}
});
table {
width: 100%
}
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr>
<td>&nbsp</td>
<td class="checkboxtd">
<input class="form-check-input" type="checkbox" value="" id="">
</td>
</tr>
</tbody>
</table>

First of all some other this about your code:
you should use checkBox.prop("checked", false); and not .attr to set the current state of the checkbox.
you normally want to listen to the change (or input) event on an input element if you want to get notified about a change a click. A checkbox could also be checked/unchecked by using other input devices like a keyboard.
To your problem, there are different ways of targeting the problem.
My first and highly suggested solution would be to rewrite the logic of your code: I would go with only changing the checked state of the checkbox in the tr event handler and then trigger the change event on the checkbox.
$('.form-check-input').on('change', function(e) {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
var checkBox = $(this).find(".form-check-input");
if (!$(e.target).is(checkBox)) {
// toggle the check state
checkBox.prop("checked", !checkBox.is(':checked'));
// trigger the change event
checkBox.trigger("change")
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
If you really want to keep your code that way - which I won't suggest due to the above-mentioned reason - you could go with the way to prevent the propagation of the event in the click event handler of the input element, that way it won't reach the tr element.
$('.form-check-input').on('click', function(e) {
e.stopPropagation()
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (checkBox.is(':checked')) {
checkBox.prop("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.prop("checked", true);
$(this).addClass("rowColor");
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
The other way would be to check in the event handler of the tr element if the click event originated from the input element, using $(e.target).is(checkBox). That way you could also change your event listener to listen for change instead of click for the checkbox. But I wouldn't recommend that either.
$('.form-check-input').on('change', function(e) {
if ($(this).is(':checked')) {
$(this).closest("tr").addClass("rowColor");
} else {
$(this).closest("tr").removeClass("rowColor");
}
});
$('#table1 tbody tr').on('click', function(e) {
//$(this).find(".form-check-input").checked = true;
var checkBox = $(this).find(".form-check-input");
if (!$(e.target).is(checkBox)) {
if (checkBox.is(':checked')) {
checkBox.prop("checked", false);
$(this).removeClass("rowColor");
} else {
checkBox.prop("checked", true);
$(this).addClass("rowColor");
}
}
});
.rowColor {
background-color: #dfecf6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1" class="table table-striped">
//thead
<tbody>
<tr class="">
<td></td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>

I think you can do a few changes feel free to visit my solution in CodePen: https://codepen.io/juanmaescudero/pen/PojQKzm
Anyway I share you the code:
HTML:
<table id="table1" class="table table-striped">
<tbody>
<tr class="">
<td>highlight row</td>
<td class="checkboxtd"><input class="form-check-input" type="checkbox" value="" id=""></td>
</tr>
</tbody>
<table>
CSS:
.rowColor {
background-color: #dfecf6;
}
JS:
$(".form-check-input").on("click", (e) => {
e = e.target;
if ($(e).is(":checked")) {
$(e.closest("tr")).addClass("rowColor");
} else {
$(e.closest("tr")).removeClass("rowColor");
}
});
Regards 😁

Jquery Keyup Filter And Input Value Problem

I'm searching in the table with jquery. Searching with keyboard is working but filtering with button does not work
Please click to button.
I want it to be added to the input and search when the button is clicked
Sample:
/* Searching with keyboard */
$(document).ready(function(){
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table td").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
/*Searching with button */
$("button").click(function(){
var id = $(this).attr("data-id");
$("#search").val(id);
});
table tr td{
border:1px solid #000;
}
<input type="text" id="search" placeholder="Search"><br>
<button type="button" data-id="🔥">🔥 Facebook</button>
<button type="button" data-id="🚀">🚀 Facebook</button>
<p>Searching with keyboard is working but filtering with button does not work. <br>Please click to button.</p>
<table>
<thead>
<tr>
<td>Hood 1</td>
<td>Hood 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>🔥 Facebook</td>
<td>🔥 Facebook</td>
</tr>
<tr>
<td>🚀 Twitter</td>
<td>🚀 Twitter</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

You are missing call for search keyup function on button click
/* Searching with keyboard */
$(document).ready(function(){
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table td").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
/*Searching with button */
$("button").click(function(){
var id = $(this).attr("data-id");
$("#search").val(id);
$('#search').keyup();
});
table tr td{
border:1px solid #000;
}
<input type="text" id="search" placeholder="Search"><br>
<button type="button" data-id="🔥">🔥 Facebook</button>
<button type="button" data-id="🚀">🚀 Twitter</button>
<p>Searching with keyboard is working but filtering with button does not work. <br>Please click to button.</p>
<table>
<thead>
<tr>
<td>Hood 1</td>
<td>Hood 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>🔥 Facebook</td>
<td>🔥 Facebook</td>
</tr>
<tr>
<td>🚀 Twitter</td>
<td>🚀 Twitter</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Why can not get alert when on html table row click?

I have this html table:
<table class="table" id="requestTable">
<thead class="text-primary">
<th>Id</th>
<th>موضوع درخواست</th>
<th>نوع درخواست</th>
<th>نام رابط شرکت</th>
</thead>
<tbody>
<tr class="row">
<td>#item.Id</td>
<td>#item.subjects</td>
<td>#item.requesttype</td>
<td>#item.interfacename</td>
</tr>
</tbody>
</table>
and write this jquery code:
<script src="~/scripts/jquery-3.1.1.min.js"></script>
<script>
$('#requestTable tr').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
$(document).ready(function() {
$("#requestTable tr").click(function() {
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
//get <td> element values here!!??
});
});​
</script>
but when i try to click on the row, don't get any alert.

I had made some changes in your code.
Changes:
Jquery Reference
Click event
HTML:
<html>
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('#requestTable tr').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
$(document).ready(function () {
$("#requestTable tr td").click(function () {
alert("You clicked my <td>! " + $(this).html() +
" My TR is:" + jQuery(this).closest('tr').text());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="table" id="requestTable">
<thead class="text-primary">
<th>Id</th>
<th>ID</th>
<th>Subject</th>
<th>Request Type</th>
</thead>
<tbody>
<tr class="row">
<td>#item.Id</td>
<td>#item.subjects</td>
<td>#item.requesttype</td>
<td>#item.interfacename</td>
</tr>
<tr class="row">
<td>#item.Id 1</td>
<td>#item.subjects 1</td>
<td>#item.requesttype 1</td>
<td>#item.interfacename 1</td>
</tr>
<tr class="row">
<td>#item.Id 2</td>
<td>#item.subjects 2</td>
<td>#item.requesttype 2</td>
<td>#item.interfacename 2</td>
</tr>
</tbody>
</table>
</div>
</form>
Hope this will work for you. Please let me know if you still face any issue. I will try to explain.

Are you sure that jquery has been loaded properly? My guess is that jquery can not be resolved using the ~/ or does not exist at that location
This fiddle seems to alert properly.
https://jsfiddle.net/o5aj1nww/
Try replacing your script tag with this
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>

You could try the below:
<script type='text/javascript'>
$('#request table tr').find('tr').click( function(){
var row = $(this).find('td:first').text();
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
});
</script>

How can i get the value of the contenent of a TD in a TR in a table? [duplicate]

This question already has answers here:
Is it possible to get the value of a <td> element using onclick?
(6 answers)
Closed 6 years ago.
I want to get the value of the td I click
I have a table ,in this table I have many tr and td
I want to get the value of the td I selected
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a id="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td id="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#lienFicheDemande').click(function (e) {
alert($('#iddem')[0].innerHTML);
window.open("Appli/Home/FicheDemande?iddem=" + $('#iddem').value, "nom_popup", " menubar=no");
});
});
</script>
i want to pass the value of dem_dpr into the link in javascript

First of all, you cannot use IDs this way. They need to be unique per document. Use class instead of IDs. Then, you can use .closest('.iddem') to grab the element closest to the link you clicked and use .html() or .text() to grab it's value.
Example:
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a class="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td class="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('.lienFicheDemande').click(function (e) {
alert($(this).closest('.iddem').html());
window.open("Appli/Home/FicheDemande?iddem=" + $(this).closest('.iddem').html(), "nom_popup", " menubar=no");
});
});
</script>

$(document).ready(function () {
$('td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});
For every TD, bind click function in each of them.
.text() function will get only the text in TD out from it.
It is best if you could put ID for the table.
So if you have added ID to the table. The solution would be like this:
$(document).ready(function () {
$('#table_id td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});

populate div based on row clicked

I am developing a project using Grails and HTML. I have a table and a blank div in my page. I'm trying to display information in this div based on the row clicked in the table. I have tried numerous methods but none of them seem to be working. Can somebody please help?
<div class="table-responsive" id="div1" style="width:330px; height:400px; background-color:#F5F5F5; float:right; ">
</div>
<table class="table table-striped" id="table">
<thead>
<tr onclick="func1(this)">
<th>OS</th>
<th>Mount</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr onClick="func1(this)">
<td>Windows1</td>
<td>D:</td>
<td>50 GB</td>
</tr>
<tr>
<td>Windows</td>
<td>D:</td>
<td>100 GB</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function func1(x)
{
$("tr").removeClass();
$("tr:gt(0)").click(function() {
$('#div1').append("<div id='div1'>alien</div>")
}
}
</script>

I am not sure what you want to do with the text, but the basic ideas are:
Add to the div:
$("#table tbody").on("click", "tr", function() {
$('#div1').append(this.text());
});
Replace the content:
$("#table tbody").on("click", "tr", function() {
$('#div1').html(this.text());
});

<script type="text/javascript">
$(document).ready(function(){
$("#table").on("click", "tr", function() {
$('#div1').html(this.text());
});
});
Or changes to func1
function func1(x)
{
$(this).removeClass();// Not sure why it is needed
$('#div1').html("Your data");
}
</script>

Categories