JSFiddle - React, Tailwind, and code Playground

by buksy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<table class="t1">
 <tr data-url="http://google.com">
   <td>Google <a href="https://example.com">and example</a></td>
 </tr>
 <tr data-url="http://stackoverflow.com">
   <td>Stackoverflow <a href="https://example.com">and example</a></td>
 </tr>
</table>

<!-- Doesnt work in webkit browsers -->
<table class="t2">
 <tr data-url="http://google.com">
   <td>Google <a href="https://example.com" onclick="javascript:return false">and example</a></td>
 </tr>
 <tr data-url="http://stackoverflow.com">
   <td>Stackoverflow <a href="https://example.com" onclick="javascript:return false">and example</a></td>
 </tr>
</table>

CSS

table { margin: 15px; }

JavaScript

$("table tr").click(function(){
  // Disable redirection
  //window.location.href = $(this).data("url");
  
  // Display just debug message about target
  console.log("Redirecting to " + $(this).data("url"));
});

$(".t1 td a").click(function(e){
  e.preventDefault();
  
  // If you uncomment next line, your other callback listener
  // won't get called because events are propagated from elements
  // that created them all the way up to the document
  // e.stopPropagation();
});