JSFiddle - React, Tailwind, and code Playground

by rsta

HTML

<table id='parent-table'>
    <tr class='form_odd_row'>
        <td><label for='f1'>On/Off</label></td>
        <td><table id='chkbox-table'>
                <tr>
                    <td><label><input type='radio' name='ck' value='1' id='ck1'> On</td>
                </tr>
                <tr>
                    <td><label><input type='radio' name='ck' value='2' id='ck2'> Off</td>
                </tr>
                <tr>
                    <td><label><input type='radio' name='ck' value='3' id='ck3'> N/A</td>
                </tr>    
            </table>
        </td>
    </tr>
    <tr class='form_even_row'>
        <td><label for='n1'>Name</label></td>
        <td><input type='text' name='name' value=''></td>
    </tr>
    <tr  class='form_odd_row' id='hidden-row'>
        <td><label for='h'>Address</label></td>
        <td><input type='text' name='address' value=''></td>
    </tr>
</table>

CSS

.form_odd_row {
    background-color: #aaa;
}

.form_even_row {
    background-color: #ccc;
}

JavaScript

$(document).ready(function(){ 
        
            $("#parent-table>tbody>tr:odd").addClass("form_odd_row"); 
            $("#parent-table>tbody>tr:even").addClass("form_even_row"); 
        
        $('input:radio[name="ck"]').change(function(){ 
            if($("#ck3").is(":checked")){ 
                $("#hidden-row").show(); 
            } else { 
                $("#hidden-row").hide(); 
            } 
            $("#parent-table>tbody>tr").removeClass('form_odd_row'); 
            $("#parent-table>tbody>tr").removeClass('form_even_row'); 
            $("#parent-table>tbody>tr:odd").addClass("form_odd_row"); 
            $("#parent-table>tbody>tr:even").addClass("form_even_row"); 
        }) 
    });