JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr class="table-row" data-href="//google.com" data-target="_blank">
<td>Google</td>
</tr>
<tr class="table-row" data-href="//yahoo.com" data-target="_blank">
<td>yahoo</td>
</tr>
<tr class="table-row" data-href="//example.com" data-target="_blank">
<td>example</td>
</tr>
<tr class="table-row" data-href="//fb.com" data-target="_blank">
<td>Facebook</td>
</tr>
</table>
CSS
table {
width: 100%;
}
tr.table-row {
height: 60px;
background-color: orange;
cursor: pointer;
}
JavaScript
var tableRows = document.getElementsByClassName('table-row');
for (var i = 0, ln = tableRows.length; i < ln; i++) {
tableRows[i].addEventListener('click', function() {
window.open(this.getAttribute('data-href'), this.getAttribute('data-target'));
});
}