JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<table class="some-table-class">
    <thead>
        <tr>
            <th>HEADER</th>
           <th>HEADER</th>
           <th>HEADER</th>
             <th>HEADER</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <a href="http://google.com">http://google.com</a>
        </td>
        <td>click anywhere</td>
        <td>click anywhere</td>
        <td>click anywhere</td>
    </tr>
    <tr>
        <td>
            <a href="http://google.com">http://google.com</a>
        </td>
        <td>click anywhere</td>
        <td>click anywhere</td>
        <td>click anywhere</td>
    </tr>
    </tbody>
</table>

CSS

table {border-collapse: collapse;}
table th { background: #f3f3f3;}
table td  { border: 1px solid #ddd; padding: 3px}

JavaScript

$('.some-table-class tbody tr').click( function(){
    
    var getTheLinkInThisRow = $(this).find('a').prop('href');
    if(getTheLinkInThisRow) window.location.href = getTheLinkInThisRow;
  
    
});