JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<img src="" onload="alert('loaded');" />
<table>
    <tr><td>Happy to recommend</td><td>100%</td></tr>
    <tr><td>Some Other Metric</td><td>2 in 3</td></tr>
    <tr><td>Some Other Metric</td><td>8 out of 10</td></tr>
    <tr><td>Some Other Metric</td><td>8/10</td></tr>
</table>

<table>
    <tr><td>Not me</td><td>I'm just a regular table</td></tr>
    <tr><td>That happens to have the right number of columns</td><td>not 1 in 5</td></tr>
</table>
        
        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        
        <table>
    <tr><td>Happy to recommend</td><td>not me</td><td>x</td></tr>
    <tr><td>This shouldnt match</td><td>2 in 3</td><td>100%</td></tr>
    <tr><td>Some Other Metric</td><td>8 out of 10</td><td>100%</td></tr>
</table>

CSS

.potential {border:1px solid orange;}
.actual {border:1px solid green;}

JavaScript

var $tables = $("table");
$("table").each(function(index) {
    console.log(index+" "+$(this).find("tr:first td").length);
    
    if ($(this).find("tr:first td").length == 2) {
        var table = $(this);
        var rowcount = 0;
        var matchcount = 0;
        table.addClass('potential');
        console.log("this is right size");
        //can the final cell be convered to a percentage
        $(this).find("tr").each(function(i) {
            rowcount++;
            $(this).find("td:last").each(function() {
                var l = $(this);
                console.log(l.text());
                //l.text(l.text() + "=" + l.text().replace(/([\d]+)(\D*|\s*)([\d]+)?/g, "$1/$3"));
                var myString = l.text();
                var myRegexp = /([\d]+)(\D*|\s*)([\d]+)?/g
                var match = myRegexp.exec(myString);
                //alert(match[1]+"|"+match[2]+"|"+match[3]);
                var perc = 0;
                if(match){
                    matchcount++;
                    if(match[1] && match[3]){
                        perc = (match[1]/match[3])*100;
                    } else if (match[1]){
                        perc = (match[1]);
                    } 
                }
                l.text(l.text() + "=" + perc);
                l.data("percentage",perc);
                if(matchcount==rowcount){table.addClass('actual');}
                
            })
        })
    }
});