JSFiddle - React, Tailwind, and code Playground

by sendil J

HTML

<table id="tableone" border="1">
    <tr class="hide">
        <td class="collapsedH"> collapsed</td>
        <td class="collapsedH"> collapsed</td>
        <td class="collapsedH"> collapsed</td>
        
        
    </tr>
    <tr >
        
        <td>Row 0 Column 0</td>
        
        <td >Row 0 Column 1</td>
        
        <td >Row 0 Column 2</td>
        
    </tr>
    <tr class="del">
        
        <td >Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr class="del">
        
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr class="del">
        
        <td>Row 3 Column 0</td>
        <td>Row 3 Column 1</td>
        <td>Row 3 Column 2</td>
    </tr>
     <tr class="del">
        
        <td>Row 4 Column 0</td>
        <td>Row 4 Column 1</td>
        <td>Row 4 Column 2</td>
    </tr>
     <tr class="del">
        
        <td>Row 5 Column 0</td>
        <td>Row 5 Column 1</td>
        <td>Row 5 Column 2</td>
    </tr>
</table>

CSS

.collapsed{
    display:none;
}

JavaScript

$(document).ready(function() {
    
        var hiddenCol ;
            $('.hide td').click(function() {
               var selectedCol = $(this).index();
                alert($('.hide').children().length);
               var selectedRow = $(this).parent().index();
                //alert(selectedCol);
                //var hiddenCol = $('td:nth-child('+(selectedCol+1)+')')
               $('td:nth-child('+(selectedCol+1)+')').hide(); 
                //alert($('.hide').parent().children().length)
                 var totalR = $('.hide').parent().children().length;
                //$('.hide').append('<td>Header</td><td rowspan="'+(totalCol-1)+'" class="collapsedH"> collapsed</td>')
                
                //$('#tableone  tr :nth-child(0) td:nth-child('+selectedCol+')').append('<td>Header</td>')
                 //$('#tableone  tr :nth-child(1) td:nth-child('+selectedCol+')').append('<td rowspan="'+(totalCol-1)+'" class="collapsedH"> collapsed</td>') 
                
                //if(selectedCol==0){selectedCol=1; }
                    //$('#tableone  td:nth-child('+selectedCol+')').after('<td>Header</td>')
                $('.hide td:nth-child('+(selectedCol+1)+')').after('<td rowspan="'+totalR+'" class="monthview" >Header</td>')
                
               // $('#tableone  td:nth-child(2)').after('<td>Header</td><td rowspan="'+(totalCol+1)+'" class="collapsedH"> collapsed</td>')
               // $('#tableone tr:nth-child(0)').after(' <tr><td rowspan="7">working</td></tr>')
               //$('#tableone tr:nth-child(1) td:nth-child(1)').append('<td>Header</td>')
               //$('#tableone > tr td:nth-child('+(selectedCol)+')').after('<td>Header</td>');
 
            });
           // alert();
            
        });