Make row clickable except on checkbox - javascript

I have written code so that if the table row is clicked it will act as a link and bring you to a new page, however I also want to have it so they can select rows to do things with. The problem is when they click on the checkbox to select it, it detect that the "row" was clicked and activates the link.
Here is the code I have written
<script>
$(document).ready(function() {$('table[name=$tableName]').DataTable();
$('table[name=$tableName] tbody').on( 'click', 'tr', function () {
$(location).attr('href', 'http://stackoverflow.com/');
})
});
</script>
I have checkboxes in the first column
The problem is anytime the checkbox is clicked I need it to not redirect the page. Basically if anywhere else is then it will.
Anyone know how I can modify to implement this functionality?

So check what was clicked and if it it the label/checkbox then ignore it.
$("table tbody").on("click", "tr", function (e) {
if ($(e.target).is("label,input")) {
return
} else {
console.log("clicked")
}
})
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked + label {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox" id="cb1"><label for="cb1">CB</label></td>
<td>HMMMM 1</td>
</tr>
<tr>
<td><input type="checkbox" id="cb2"><label for="cb2">CB</label></td>
<td>HMMMM 2</td>
</tr>
<table>

Related

Select A Button By Class jQuery

I am trying to have a button that, when clicked, will have some jQuery code linked to it. See the general layout below. However, there will be a variable number of rows on the table. All the buttons should have the same action but applied to its parent element. How can I achieve this?
Thanks
td {
border: 1px solid black;
padding: 10px;
}
<table>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
</table>
You can do that in several ways, question is tagged with jQuery so the easiest way using jQuery is :
$("button").on("click", function(ev) {
$(this).parents("tr").remove()
});
This will remove tr element when clicked on it's button, you can do what you want inside that anonymous function
The example below does what you need, it will check any click within a table element to see if it matches the required pattern (in this case a button with class .remove), before then actioning the code.
I've added a dynamically added row so you can test it.
If you aren't having dynamically added rows (i.e. they are all there before this code is run) then you can simply use:
$("table button.remove").click( function() {
$(this).closest("tr").remove();
});
// Add click event linked to the table
// Will trigger whenever a button with class .remove is clicked within the table
$( "table" ).on( "click", "button.remove", function() {
// Move up DOM tree to nearest 'tr' and remove it
$(this).closest("tr").remove();
});
// Add click event to add row button
$("#add-row").click( function() {
// Add dynamic row for testing
$("table").append('<tr><td>Info</td><td><button class="remove">Remove row</button></td></tr>');
});
td {
border: 1px solid black;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
</table>
<button id="add-row">Add Row</button>
Try this
let btns = $("button.remove"); // you will select only buttons with remove class
in your case you want something like this :
btns.each(function(){
let btn = $(this);
btn.on('click',()=>{
// your stuff
})
})
i hope it was useful !

Exclude select menu form onclick onclick event

I am using DataTables (https://datatables.net) where I have clickable rows. Here is my code for that:
$(document).ready(function() {
let city = document.getElementById("cityselect").value;
var table = $('#resdatatable').DataTable();
$('#resdatatable tbody').on('click', 'tr', function () {
var data = table.row( this ).data().id;
alert ("clicked!");
} );
} );
In those clickable rows, I have a select box that onchange calls a function. Looks like this:
<select id ="resstatus1" onchange="changeResStatus(1)" data-previousvalue="Confirmed">
The issue I am having is that in Chrome (not Safari) when the select box is clicked on, I get an alert. I need to make it so clicking the select box doesn't trigger the alert. How can I do that?
Thanks!
I did it this way and it works:
$('#resdatatable tbody').on('click', 'tr', function (e) {
if($(e.target).is('select')){
e.preventDefault();
return;
}
};
The other ways mentioned broke the the entire click function.
You can do that by checking the target element. I made up a little, generic fiddle that you can test. I believe this is what you are trying to do. Now when you click on the select element, you won't get that alert message, but if you click the tr anywhere else, you'll see the alert message.
Fiddle: https://jsfiddle.net/7136cyhp/1/
$(document).ready(function() {
// let city = document.getElementById("cityselect").value;
// var table = $('#resdatatable').DataTable();
$('table td').on('click', function (e) {
if (e.target !== this) {
return;
} else {
//var data = table.row( this ).data().id;
alert ("clicked!");
}
});
});
table {
width: 100%;
border: 1px solid;
}
tr {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select id="test">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
</td>
</tr>
</table>
A simple and clean way to achieve this is using the stopPropagation function on the event - this prevents an event bubbling up the DOM tree, so event handlers on parent elements are not notified of the event. If you apply this to clicks on the select, then it won't trigger any events attached to the parent cells or rows etc.
Demo:
$('#resdatatable tbody').on('click', 'select', function(e) {
e.stopPropagation();
});
$('#resdatatable tbody').on('click', 'tr', function(e) {
alert("hello");
});
table {
border-collapse: collapse;
}
table td {
border: 1px solid #cccccc;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="resdatatable">
<tbody>
<tr>
<td>Hello, you can click this bit</td>
<td>
<select>
<option>Clicking this won't fire the event</option>
</select>
</td>
</tr>
</tbody>
</table>

change background-color on tablerow selection

I have a bunch of tables as partialViews which are loaded in using ajax.
now I want to write a global function that when someone clicks on a tablerow, the background-color turns orange, and when selecting a different tablerow the old one turns white again and the new one turns orange.
so I wrote this at the bottom of the _Layout.cshtml:
<script type="text/javascript">
$(document).ready(function() {
$("table tbody tr").on('click', function () {
var selected = $(this).hasClass("selectedTableRow");
$("table tbody tr").removeClass("selectedTableRow");
if (!selected)
$(this).addClass("selectedTableRow");
});
});
</script>
but it's not being reached at all, console.logs or alerts that I've placed in that function are not being fired. Why not?
btw my tables all have a standard setup
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
you are creating tables dynamically so bind click event using document with .on, see below
$(document).ready(function() {
$(document).on('click',"table tr", function () {
var selected = $(this).hasClass("selectedTableRow");
$("table tr").removeClass("selectedTableRow");
if (!selected)
$(this).addClass("selectedTableRow");
});
});
$(document).ready(function() {
$("body").on('click', "table tr", function () {
$("table tr").removeClass("selectedTableRow");
$(this).addClass("selectedTableRow");
});
});

Jquery trigger click then fill in input

I have a table row that when clicked should trigger a click event on page that opens a div. once this div is open, i need #poId to be populated with given id.
$('tr').click(function(){
var id = $(this).attr('id');
$('#purchase\\.exist').trigger('click');
//What goes here?
});
the page that results from the click is:
<input type='text' id='poId' name='poId'>
basically i need to know what i can use to fill poId with click automatically. in layman's terms
$('tr').click(function(){
var id = $(this).attr('id');
//Open page as a result of trigger
//paste the variable id in the poId input
});
Added fiddle:
This fiddle is completely stripped down but the idea is a user clicks on the word question. a table appears with two rows. when a user click on the table row, the purchase div is opened and the input needs to be populated with the id of the tr clicked.
Fiddle
I know there are other ways to do this without trigger, but opening the div actually entails a bunch of other things (ajax functions and such) before the div is opened, so just simply opening the purchase div wont work
To populate poId with the value of the ID of the tr that was clicked on (which I think is what you're asking):
$('tr').click(function(){
$("#poId").val(this.id);
$('#purchase').trigger('click');
});
(I am assuming that "#purchase\.exist" was a typo of some sort?)
$(function() {
$('.hide').hide();
$('tr').click(function() {
var id = $(this).attr('id');
$('#poId').val(id);
// the second argument is an array of parameters that will be passed to the function
$('#purchase').trigger('click', [id]);
});
// the first argument of function `click` receives is the event, the next are the arguments passed from the trigger
$('li').click(function(e, id) {
var liID = $(this).attr('id');
var div = $('#div_' + liID)
div.show();
div.find('input').val(id)
});
});
li:hover {
cursor: pointer;
}
tr:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id='purchase'>Purchase</li>
<li id='question'>Question</li>
</ul>
<div id='div_purchase' class='hide'>
<input type='text' id='poID' name='poID'>
</div>
<div id='div_question' class='hide'>
<table id='myTable'>
<tr id='12345'>
<th>12345</th>
</tr>
<tr id='45678'>
<th>45678</th>
</tr>
</table>
</div>

How to disable all rows of HTML table?

[Not exactly the same as the question "how to disable knockout click...". My question involves specific usage of an HTML table and contains valuable approaches on solving such case.]
I have the following table and button below it:
<table>
<tbody data-bind="foreach: my-array">
<tr data-bind="click: $ShowDetails()">
...
<button>Add New Record</button>
The table rows are clickable (and would load some details data in another table).
On click of the button I need to disable all table rows and add one new <tr> on top.
I know how to add the new record on top:
$('<tr><td contenteditable="true">New Record Here</td></tr>').prependTo('table > tbody');
But how to disable all rows of the table so they won't be clickable and look disabled (grayed out)?
Just add disabled class to your <tr>'s using $("tr").addClass("disabled").
The grayed out backgroung can be added by using $('tr').css('background-color','grey') or by describing .disabled class in your css-file:
tr.disabled {
background-color: grey;
}
Then in your ShowDetails() method just check if calling element has the .disabled class by using $(this).hasClass("disabled") method. Show details if it doesn't and do nothing if it does.
Instead of checking the disabled class you can also add a new bool observable named AddMode() and set it to true on Add New button click, and on ShowDetails() put a first line if(AddMode() === true) return; (by #st_stefanov)
I used this CSS code to disable HTML row
.row-disabled {
background-color: rgba(236, 240, 241, 0.5);
pointer-events: none;
width: 100%;
}
$(function (){
var myDisableBtn = $('#btn');
myDisableBtn.on('click',function (){
$('tr').css({'pointer-events':'none',
'background-color':'grey'});
});
});
$(document).ready(function () {
$('#btn').click(function () {
$('#test_table tr').prop('disabled', 'disabled').css('background-color', 'grey');
$('#test_table tbody').prepend('<tr><td contenteditable="true">New Record Here</td></tr>')
});
});
<input type="button" id="btn" value="Add New Record"/>
<table style="width:100%" id="test_table">
<tbody>
<tr>
<td>Jill</td>
</tr>
<tr>
<td>Eve</td>
</tr>
</tbody>
</table>

Categories

Resources