JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<table class="mainTable">
    <tbody>

        <tr class="mainTableTr mainTableTbodyTr">
            <td class="mainTableTd">First Try</td>
            <td class="mainTableTd"></td>
            <td class="mainTableTd">2014/08/05</td>
            <td class="mainTableTd">2014/09/02</td>
            <td class="mainTableTd">0</td>
            <td class="mainTableTd">0</td>
            <td class="mainTableTd">0%</td>
            <td class="mainTableTd">
                Active
            </td>
            <td class="mainTableTd">
                
            </td>
        </tr>
        
        <tr class="mainTableTr mainTableTbodyTr">
            <td class="mainTableTd">First Try</td>
            <td class="mainTableTd"></td>
            <td class="mainTableTd">2014/08/05</td>
            <td class="mainTableTd">2014/09/02</td>
            <td class="mainTableTd">0</td>
            <td class="mainTableTd">0</td>
            <td class="mainTableTd">0%</td>
            <td class="mainTableTd">
                Active
            </td>
            <td class="mainTableTd">
                
            </td>
        </tr>
        
        <tr class="mainTableTr mainTableTbodyTr">
            <td class="mainTableTd">First Try</td>
            <td class="mainTableTd"></td>
            <td class="mainTableTd">2014/08/05</td>
            <td class="mainTableTd">2014/09/02</td>
            <td class="mainTableTd">0</td>
            <td class="mainTableTd">0</td>
            <td class="mainTableTd">0%</td>
            <td class="mainTableTd">
                Active
            </td>
            <td class="mainTableTd">
                
            </td>
        </tr>

    </tbody>
</table>

JavaScript

var $trs = $('.mainTable').eq(0).find('.mainTableTr'),
    i = $trs.length,
    mod = 19;

function startRow() {
    i--;
    
    var _mod = (mod += 7),
        j = i,
        views = 0,
        conversions = 0,
        crs = 0,
        $tr = $trs.eq(i),
        $tds = $tr.find('td'),
        $views = $tds.eq(4),
        $conversions = $tds.eq(5),
        $crs = $tds.eq(6);
    
    function cycle() {
        views++;

        if ( !(views%_mod) ) {
            conversions++;
        }
        crs = conversions/views;
        
        $views.text(views);
        $conversions.text(conversions);
        $crs.text((crs*100).toFixed(2) + '%');
        
        setTimeout(cycle, 150);
    }
   
    cycle(); 
    
    i && setTimeout(startRow, 2250);
}

startRow();