select multiple tr and redirect on single tr click

Question

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.

your question is not clear, when clicking on the check box what do you want to achieve. can you post this with some expected outputs — Vithursa Mahendrarajah, Oct 19 '18 at 11:51
When I click the the tr has to be selected (i.e nothing but check box has to be remain checked). But instead it is getting redirected. Where are you actually facing issue in question ? — Sandesh Ghanta, Oct 19 '18 at 11:54
Well right now it's quite obvious that clicking on the tr will make it redirect due to the window.location command. If you don't want it to redirect, remove that command. Or do you mean "when I click" on the checkbox specifically. Again you're not being very specific about what you mean. Please make it 100% clear what you are talking about clicking on. — ADyson, Oct 19 '18 at 11:55
give more clarification to this question,So it will become easy to help you out — Ibrahim Inam, Oct 19 '18 at 11:56
I want to make a redirect by clicking only on the tr but not on the checkbox (alike gmail, the mails in inbox (they open on click and get selected by checking the checkbox right ?) ) — Sandesh Ghanta, Oct 19 '18 at 11:57

score 1 · Answer 1 · answered Oct 19 '18 at 12:00

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?

score 0 · Accepted Answer · answered Oct 19 '18 at 12:00

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>

Thanks for the answer. is there any order for these events being triggered ? — Sandesh Ghanta, Oct 19 '18 at 12:08
if you think carefully about what I have written regarding propagation of events _from child upwards to parent_, the answer to that will be obvious... or you can always test it with some console.log commands. Or you could google it and [find the answer](https://javascript.info/bubbling-and-capturing). — ADyson, Oct 19 '18 at 12:10

score -1 · Answer 3 · answered Oct 19 '18 at 12:00

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>

score -1 · Answer 4 · answered Oct 19 '18 at 12:07

-1

Try following code:

<table>
<thead>
 <tr>
   <td>filename</td>
   <td>file size</td>
   <td>date</td>
 </tr>
</thead>
<tbody>
 <tr>
 <td>
  <input type="checkbox">
  <a href="https://yahoo.com"  style="text-decoration:none;">file 1</a>
 </td>
 <td>
  1MB
 </td>
 <td>
  13-01-12
 </td>
 </tr>
 <tr>
 <td>
  <input type="checkbox">
  <a href="https://google.com"  style="text-decoration:none;">file 2</a>
 </td>
 <td>
  2MB
 </td>
 <td>
  23-12-17
 </td>
 </tr>
</tbody>
</table>

answered Oct 19 '18 at 12:07

Vithursa Mahendrarajah

1,194
2
15
28

1

Thanks for the code but I have already implemented this. I don't want the users to click on the specific name for redirection. It doesn't make the UX better (I guess) – Sandesh Ghanta Oct 19 '18 at 12:10
Hmm..Got clarified now. But it depends the use case.. cannot tell as a common. Posted answer seems to be suitable. Similar question raised in https://stackoverflow.com/questions/10086671/how-to-handle-a-click-on-a-tr-but-not-on-the-child-elements as well – Vithursa Mahendrarajah Oct 19 '18 at 12:17
@user3686193 it would be better if you added an explanation to your answer, then people can immediately understand what you have changed, and why. Then they can consider if this is a good alternative approach for them, without having to work it out. – ADyson Oct 19 '18 at 12:48

select multiple tr and redirect on single tr click

4 Answers4