JSFiddle - React, Tailwind, and code Playground

by kyleshen

HTML

<select id="ddlItems">
  <option value="B">Hide Column B</option>
  <option value="C">Hide Column C</option>
  <option value="D">Hide Column D</option>
  <option value="E">Hide Column E</option>
</select>
<input type="button" value="Hide" id="btnHide" />
<br />
<table border="1">
            <tr>
                <td rowspan="3">ColumnA</td>
                <td colspan="4" id="tdCol" >Items</td>
                <td rowspan="3">ColumnF</td>
            </tr>
            <tr>
                <td class="GroupB">ColumnB</td>
                <td>ColumnC</td>
                <td>ColumnD</td>
                <td>ColumnE</td>
            </tr>
            <tr>
                <td class="GroupB">info</td>
                <td>info</td>
                <td>info</td>
                <td>info</td>
            </tr>
     <tr>
                    <td class="GroupB">XXXX</td>
                    <td>XXXX</td>
                    <td>XXXX</td>
                    <td>XXXX</td>
                    <td>XXXX</td>
                    <td>XXXX</td>
                </tr>
</table>

JavaScript

$('#btnHide').click(function(){
    //$('td:nth-child(3)').hide();
    $('.GroupB').hide();
    $('#tdCol').attr('colspan',3);
});