We Keep Coding

select multiple tr and redirect on single tr click

I have a table. This is the sample code for it.
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox">
file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>
I have a check box input at each row to select multiple tr in tables. I also need to get redirected to the detail view of the file onclick. so, this is my JS code
$(document).on("click", "table tbody tr", function() {
window.location = $(this).data('href');
});
Now whenever I am trying to click the check box the tr is getting clicked. So, the page is getting redirected to another page. But select is not working. How to prevent page redirection on clicking on select.
Thanks in advance
UPDATE::
I want to implement functionality like Inbox mails in gmail. Whenever I click on any of the mail, it gets opened. If I check the checkbox the corresponding mail will be selected.

When an element is clicked, it bubbles up to the highest point in the DOM which has a click event attached. To prevent your checkboxes from triggering the click event on your <tr>'s, you need to stop the 'bubbling'.
Add this to your code:
$('input:checkbox').on("click", function(e){
e.stopPropagation();
});
Source: How do I prevent a parent's onclick event from firing when a child anchor is clicked?

Since the checkbox is a child of the table row, when you click the checkbox the click event is propagated up the DOM. This means it bubbles up to all its parent elements as well, and any click events defined on those parents are also triggered.
Therefore, the click event you placed on the table row is also executed when you click on the checkbox.
Fortunately, you can prevent this by handling the checkbox's click event and running the stopPropagation method, which turns off this "bubbling" behaviour.
Demo:
$(document).on("click", "table tbody tr", function() {
alert("click"); //just for testing
//window.location = $(this).data('href');
});
$(document).on("click", 'input[type="checkbox"]', function(event) {
event.stopPropagation();
});
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #cccccc;
padding 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"> file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox"> file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>

use Event.Target
document.querySelector("table")
.addEventListener("click" , event=>{
if(( event.target ).tagName == "TD" || ( event.target ).tagName == "TR" ){
alert("redirect")
}
if(( event.target ).tagName == "INPUT" ){
alert("select")
}
})
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox">
file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>

Try following code:
<table>
<thead>
<tr>
<td>filename</td>
<td>file size</td>
<td>date</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
file 1
</td>
<td>
1MB
</td>
<td>
13-01-12
</td>
</tr>
<tr>
<td>
<input type="checkbox">
file 2
</td>
<td>
2MB
</td>
<td>
23-12-17
</td>
</tr>
</tbody>
</table>

Choosing more complicated path to element in jquery

I have a code which gets one of input's to show/hide some information when it's chosen.
$("input[name$='payment']").click(function() {
Everything works as it should, however, my website let's user to click whole table element to tick the input.
How can I tell jQuery to choose whole element, not only the small input ticker if my code looks like this:
<table cellspacing="0">
<tbody><tr class="moduleRowSelected" onmouseover="rowOverEffect(this)"">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="importantpaymentwithexternalinformation" type="radio"> </td>

You can target the tables containing those elements using .closest("table"):
$("input[name$='payment']").closest("table").click(function() {
// ------------------------^^^^^^^^^^^^^^^^^
Within the click handler, this will refer to the table. Since a user clicking the table may not click the radio button, you'll want to include code to do that for them:
$(this).find("input[name$='payment']").prop("checked", true);
Example:
$("input[name$='payment']").closest("table").click(function() {
$(this).find("input[name$='payment']").prop("checked", true);
});
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type1" type="radio"> Type 1</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type2" type="radio"> Type 2</td>
</tr>
</tbody>
</table>
<table cellspacing="0">
<tbody>
<tr class="moduleRowSelected">
<td width="10"><img src="cat/pixel_trans.gif" width="10"></td>
<td class="main"><b>Name of payment</b></td>
<td class="main"><input name="payment" value="type3" type="radio"> Type 3</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Visibility does not work

So I have content that is hidden. And using one button, I want to make it visible. But it doesnt work
<table style="visibility:hidden;" id="viewevade">
<tr>
<td class="form"width="25%">Period</td>
<td class="form"width="75%"> PeriodA </td>
</tr>
<tr>
<td class="form">Inbound Call Date</td>
<td class="form">Date</td>
</tr>
<tr>
<td class="form">Input Date</td>
<td class="form"> DateA</td>
</tr>
<tr>
<td class="form">Reviewer</td>
<td class="form">username</td>
</tr>
<tr>
<td class="form">Topic</td>
<td class="form">Topic A</td>
</tr>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
and I make a function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
to use it in
<button width="100%" onclick="ViewEva();">View Evaluation</button></td>
It doesnt work. Any help? Thanks b4

I created this as a codepen here:
http://codepen.io/anon/pen/pjZMrO
Using your function:
function ViewEva()
{
document.getElementById("viewevade").style.visibility='visible';
document.getElementById("vieweva").style.visibility='visible';
}
It seems to work fine. Do you have any errors in the JavaScript developer console of your browser?
EDIT: The form in the table contained an empty form post - this lead to the form being posted as it was displayed and the element appearing to show and immediately disappear.
<form action ="" method="post" onsubmit="">

I can think of two things.
You are not including your script
Your HTML is wrong and your browser goes bananas
Here you have a plunker working example
Note both the <script src='./script.js'></script> and the
<tr>
<td>
<table width="100%" border=0 style="margin-top:20px;visibility:hidden;" id="vieweva">
<tr>
<td class="form" ><br>asdfjkl;asdfjkl;asdfjkl;</td>
</tr>
</table>
</td>
</tr>
Your table cannot be direct child of the row, you have to put it in a column, and close the inner table

Delete <tr> using jQuery

<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow(field_baf1034a_d9d1_a85f_3294_0de635d39c82);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow(field_85a21c73_da7c_3814_609e_0b743c8f014f);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
Javascript code:
var service = {
removeRow:function(id){
/* alert(id) == [object HTMLTableRowElement]*/
$("#"+id).remove();
}
}
Console Error:
Error: Syntax error, unrecognized expression: #[object
HTMLTableRowElement]
I want to delete table row, please help.

You are passing identifiers not strings.
Consequently, the horrible IE4ism that has somehow made it into HTML which causes every element with an id to create a global JS variable with the same ID is giving you the <tr> elements themselves.
When you "#"+id you convert the HTML Element object into a string, which is [object HTMLTableRowElement]
Put quotes around the IDs you are passing.
service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82')

You need to quote the IDs when you have them in your html like that:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td><a onclick="service.removeRow('field_baf1034a_d9d1_a85f_3294_0de635d39c82');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td><a onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');" href="javascript:void(0);"> <i class="fa fa-delete"></i></a></td>
</tr>
</tbody>
</table>
or better yet, don't inline your event handlers and do it all in JS:
$('#fieldList a').on('click', function (e) {
$(this).closest('tr').remove();
});
which has the side effect of neater html:
<table class="table table-bordered table-hover tablesorter">
<tbody id="fieldList">
<tr id="field_baf1034a_d9d1_a85f_3294_0de635d39c82">
<td>Description</td>
<td>Test Description</td>
<td> <i class="fa fa-delete"></i>
</td>
</tr>
<tr id="field_85a21c73_da7c_3814_609e_0b743c8f014f">
<td>Address</td>
<td>Test Address</td>
<td> <i class="fa fa-delete"></i></td>
</tr>
</tbody>
</table>

You can simplify your code by referencing the parent tr, not directly, but starting from the child td using jQuery closest.
HTML:
<td><a onclick="service.removeRow(this);" href="javascript:void(0);"> <i class="fa fa-delete"></i></a>
</td>
Code:
var service = {
removeRow:function(el){
$(el).closest('tr').remove();
}
}
In this way you can avoid to hard code its id.
Demo: http://jsfiddle.net/IrvinDominin/keLnN/

If you want to delete the row, where is the button, the better way is to use "this", not hardcoded the Row's IDs, because if ID is different - you need to change the function.
Set all a-tags to be:
<a onclick="service.removeRow(this);" href="javascript:void(0);">
then, the function will be:
var service = {
removeRow:function(td){
$(td).closest("tr").remove();
}
}

change the mark up like this...
onclick="service.removeRow('field_85a21c73_da7c_3814_609e_0b743c8f014f');
hope it solves!

Try this:
$('"#'+id+'"').remove();

Create <a> tags like below
<a class="removeRow" href="javascript:void(0);">
then in Jquery
$(document).ready(function(){
$('.removeRow').click(function(){
$(this).closest('tr').remove();
});
});

You need to remove a child from its parent node so here is a small example
<!DOCTYPE html>
<html>
<body>
<table id="table1" border="2">
<tr id="tr1" >
<td id="td1"><p id="p1">This is a paragraph.</p></td>
<td id="td1"><p id="p2">This is another paragraph.</p></td>
</tr>
</table>
<script>
var parent=document.getElementById("table1");
var child = document.getElementById("tr1");
child.parentNode.removeChild(child);
</script>
</body>
</html>
Actually here i have a table with a id of table1 as you can see...
in script i defined a variable with the name of child ...
now in last line child.parentNode.removeChild(child); child is the name of variable that we define earlier... after then parentNode will search for its parent node of child that is table and after then the removeCHILD will remove the child...
hope you understood! thanks

Get nearest input element from same div

Let's say I have next construction
<table id="mainTable">
<tr>
<td>
<div class="parentDiv">
<input class="childInput"/>
<table>
<tbody>
<tr>
<td>
<span>I am here!</span>
<td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
How can I get input element from span? Using jQuery or standart methods.
mainTable has many rows so I can't use id on input.
I can do it with:
$($(spanElement).parents(".parentDiv")[0]).children(".childInput")[0]
Do you know an easier way?

$(spanElement).closest('.parentDiv').find('input');

$(spanElement).closest('.parentDiv').find('.childInput');