JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<!--
table(>thead(>tr>th(>label>input#selectAll[type="checkbox"])+th{Street Address}+th{Zip Code}+th{Meter Type}+th{Effective Date})+tbody>tr*7>td(>input[id="address$"][type="checkbox"])+td(>label[for="address$"]{$$$ Street Ln, ESIID: 1290390329032 $$$$})+td{770$$}+td{Temporary}+td>input[placeholder="mm/dd/yyyy"])+div.handle>button#updateButton.right[type="button"]{Continue}
-->

<table>
    <thead>
        <tr>
            <th><label for=""><input type="checkbox" id="selectAll"></label></th>
            <th>Street Address</th>
            <th>Zip Code</th>
            <th>Meter Type</th>
            <th>Effective Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" id="address1"></td>
            <td><label for="address1">001 Street Ln, ESIID: 1290390329032 0001</label></td>
            <td>77001</td>
            <td>Temporary</td>
            <td><input type="text" placeholder="mm/dd/yyyy"></td>
        </tr>
        <tr>
            <td><input type="checkbox" id="address2"></td>
            <td><label for="address2">002 Street Ln, ESIID: 1290390329032 0002</label></td>
            <td>77002</td>
            <td>Temporary</td>
            <td><input type="text" placeholder="mm/dd/yyyy"></td>
        </tr>
        <tr>
            <td><input type="checkbox" id="address3"></td>
            <td><label for="address3">003 Street Ln, ESIID: 1290390329032 0003</label></td>
            <td>77003</td>
            <td>Temporary</td>
            <td><input type="text" placeholder="mm/dd/yyyy"></td>
        </tr>
        <tr>
            <td><input type="checkbox" id="address4"></td>
            <td><label for="address4">004 Street Ln, ESIID: 1290390329032 0004</label></td>
            <td>77004</td>
            <td>Temporary</td>
            <td><input type="text" placeholder="mm/dd/yyyy"></td>
        </tr>
        <tr>
            <td><input type="checkbox" id="address5"></td>
            <td><label for="address5">005...

CSS

.errdCell {background-color: #FFC6C6;}

JavaScript

$('input').click(function(){
    //alert($(this).closest('tr').index());
});

$('#selectAll').click(function(){
    if ($(this).is(':checked')){
        $(this).closest('table').find('input').prop('checked','checked');
    }
    else {
        $(this).closest('table').find('input').prop('checked','');
    }
});

$(':checkbox').click(function(){
    var $this = $(this);
    if ($this.is(':checked')){
        $this.closest('tr').find(':text').focus();
    }
    else {
        $this.closest('tr').find(':text').val('');
    }
});

$('table :text').blur(function(){
    if ($(this).val() !== "") {   $(this).closest('tr').find(':checkbox').prop('checked','checked');
    }
});

$('#updateButton').click(function(){
    if (!($('table :checkbox').is(':checked'))) {
        $('td:nth-child(1)').addClass('errdCell');
    } else {
        $('td:nth-child(1)').removeClass('errdCell');
    }
    
    for (var i=0; i<=$('table tbody tr').length;i++) {
        if ($('tr:eq('+i+') td :checkbox').is(':checked') && $('tr:eq('+i+') td :text').is('empty')) {
            $('tr:eq('+i+')').addClass('errdCell');
        }
        
    }
    

    

    
    
});