JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<table>
  <tr>
    <td class="spanned-bd" rowspan="4" aria-describedby="4"></td>
    <td class="spanned-bu" rowspan="2" aria-describedby="2"></td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="spanned-bu" rowspan="2" aria-describedby="2"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

td {
  border: 1px solid black;
  width: 40px;
  height: 30px;
}

.hidden {
  display: none;
}

JavaScript

$("td[class^='spanned-']").on('click', function(){
	 var currentSpan = $(this).attr('rowspan');
   $(this).nextAll().addClass('hidden');
   $(this).attr('rowspan', 1);
   
   /* alert($(this).attr('class')); */
     
});

$("table").on('focus', function(){
	console.log('focus');
});