JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table border="1">
    <tr>
      <td></td>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
      <td>Column 4</td>
    </tr>
    <tr>
    <td>Row 1</td>
      <td rowspan="3" colspan="3">1</td>
      <td style="display:none;"> </td>
      <td style="display:none;"></td>
      <td>4</td>
    </tr>
    <tr>
     <td class='active'>Row 2</td>
      <td style="display:none;"> </td>
      <td style="display:none;"></td>
      <td style="display:none;"></td><td>8</td>
    </tr>
    <tr>
      <td>Row 3</td>
      <td style="display:none;"> </td>
      <td style="display:none;"></td><td style="display:none;">
      <td>12</td>
    </tr>
</table>

CSS

tr td{
  cursor:pointer;
}
td.active{
  color:red;
}

JavaScript

$('td').click(function(){
    var colIndex = '';
    var rowIndex = '';
    $(this).addClass('active')
    alert('Row: ' + rowIndex + ', Column: ' + colIndex);
});