JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<table cellpadding="0" cellspacing="0" id="analyzerCampaignViewTable" width="100%">
            <thead>
                <tr>
                    <th class="td200">URL</th>
                    <th>Value</th>
                    <th>Title Tag (30)</th>
                    <th>Term in URL? (15)</th>
                    <th>Meta Desc (15)</th>
                    <th>Indexable (15)</th>
                    <th>One H1 tag (25)</th>
                </tr>
            </thead>
            <tbody>
                   <tr>
                        <td class="url">http://www.localsfagents.com/ut/murray/auto-insurance <span>100</span></td>
                        <td class="total">300</td> 
                        <td>Y</td>
                        <td>Y</td>
                        <td>N</td>
                        <td>N</td>
                        <td>Y</td>
                        
                    </tr>
                    <tr>
                        <td class="url">http://www.localsfagents.com/ut/murray/auto-insurance <span>100</span></td>
                        <td class="total">300</td>
                        <td>Y</td>
                        <td>N</td>
                        <td>N</td>
                        <td>Y</td>
                        <td>N</td>
                        
                    </tr>
                    <tr> 
                        <td class="url">http://www.localsfagents.com/ut/murray/auto-insurance <span>100</span></td>
                        <td class="total">300</td>
                        <td>Y</td>
                        <td>Y</td>
                        <td>Y</td>
                        <td>N</td>
                        <td>Y</td>
                        
                    </tr>
           </tbody>
        </table>

CSS

table td,
table th{padding: 2px 4px;}
.red{background-color:Tomato;}
.yellow{background-color:Yellow;}
.green{background-color:YellowGreen;}

JavaScript

var $dataRows=$("#analyzerCampaignViewTable tr td:not('.url, .total')");
var totals=[0,0,0];
var clmnVals=[30, 15, 15, 15, 25];

$dataRows.each(function() {
   
    if ($(this).text() == 'N') {
       //alert($(':nth-child(2)', $(this)).html());
       $(this).css("color", "red");
       $(this).attr("value", "0"); 
    
    } else if ($(this).text() == 'Y'){
    
       $(this).css("color", "green");
       //$(this).attr("value", clmnVals[0]);
       $(this).attr("value", clmnVals[0]);
    }
    //console.log($(this).closest('tr').html());
    $(this).closest('tr').each(function(){
        var $rowTotal = $('td.total', $(this)).text(); 
        console.log($rowTotal);
    });
    
    //$(this).each(function(i){        
        //totals[i]+=parseInt( $(this).attr("value"));
   // });
    //if ($(this).text() == 'N') {
       //$(this).parent().addClass('green');
    //}
});

//$("#sum_table td.totalCol").each(function(i){  
//    $(this).html("total:"+totals[i]);
//});

//$("#analyzerCampaignViewTable tr.y_n td:eq(3)").css("color", "red");