JSFiddle - React, Tailwind, and code Playground

by chepe263

HTML

<html>
<head>
    <script src="../js/jquery.js"></script>
    <script src="./chihiro.js"></script>
    <style>.right{background-color: #FFA0A0;}</style>
</head>
<body>
        <div>NEW STUFF; HOT STUFF</div>
        <div style="display: block;">
    
<fieldset>
    <legend>Datos del equipo</legend>
    <table class="nostyle" id="tblEquipo" data-consumoteorico="3.85">
    <tbody>
        <tr>
            <td width="300">Código del equipo:</td>
            <td width="150" class="t-right">EP-11</td>
            <td></td>
        </tr>
        <tr>
            <td>Cliente:</td>
            <td class="t-right">EL PILAR</td>
            <td></td>
        </tr>
        <tr>
            <td>Ubicación:</td>
            <td class="t-right">MONTELIMAR</td>
            <td></td>
        </tr>
        <tr>
            <td>Fecha:</td>
            <td class="t-right">26-04-2012</td>
            <td></td>
        </tr>
    </tbody>
    </table>
    <tbody>
        <tr>
            <td width="300">Código del equipo:</td>
            <td width="150" class="t-right">EP-11</td>
            <td></td>
        </tr>
        <tr>
            <td>Cliente:</td>
            <td class="t-right">EL PILAR</td>
            <td></td>
        </tr>
        <tr>
            <td>Ubicación:</td>
            <td class="t-right">MONTELIMAR</td>
            <td></td>
        </tr>
        <tr>
            <td>Fecha:</td>
            <td class="t-right">26-04-2012</td>
            <td></td>
        </tr>
    </tbody>
    </table>
</fieldset>
<fieldset>
    <legend>Cálculos de consumo</legend>
    <table class="w-border" id="tblCalculosConsumo">
    <tbody>
        <tr>
            <th width="100">Fecha</th>
            <th width="100" class="t-right">Caudalimetro</th>
            <th width="100" class="t-right">Horometro</th>
            <th width="100" class="t-right">Galones</th>
            <th width="100" class="t-right">Porcentaje inicial</th>
            <th width="100" class="t-right">Porcentaje...

JavaScript

var indices = [];
jQuery(document).ready(function(){
    $('body').append("<style>.tatw{background-color: #FFA0A0;color:purple;}</style>");
     //prev = parseInt( $('#tblCalculosConsumo .registro').eq(0).children().eq(5).text().replace("%",'') );
     
     if ( parseInt( $('#tblCalculosConsumo .registro').eq(0).children().eq(5).text().replace("%",'') )  == parseInt( $('#tblCalculosConsumo .registro').eq(1).children().eq(5).text().replace("%",'') ) )
     $('#tblCalculosConsumo .registro').eq(0).addClass('tatw');
     
     
    
    for (i=0; i <= $('#tblCalculosConsumo .registro').length - 1; i++){
        
        if (parseInt( $('#tblCalculosConsumo .registro').eq(i).children().eq(5).text().replace("%",'') ) == parseInt( $('#tblCalculosConsumo .registro').eq(i - 1).children().eq(5).text().replace("%",'') )
        ||
        parseInt( $('#tblCalculosConsumo .registro').eq(i).children().eq(5).text().replace("%",'') ) == parseInt( $('#tblCalculosConsumo .registro').eq(i + 1).children().eq(5).text().replace("%",'') )
        
        )
        {
            $('#tblCalculosConsumo .registro').eq(i).addClass('tatw');
            $('#tblCalculosConsumo .registro').eq(i).attr('percent',parseInt( $('#tblCalculosConsumo .registro').eq(i).children().eq(5).text().replace("%",'') ));
            }//if
        }//for


        
        
        var inicio=0;
        var fin = 0;
        for (i=1 ; i < $('#tblCalculosConsumo .tatw').length *2; i++ ){

            //$('#tblCalculosConsumo .tatw').eq(i).children().css('border','2px solid green');
            $('#tblCalculosConsumo .tatw').eq(i).children().eq(6).text(i);
    if(   ( $('#tblCalculosConsumo .tatw').eq(i+1).attr('percent') == $('#tblCalculosConsumo .tatw').eq(i).attr('percent') ) == false
            //||( $('#tblCalculosConsumo .tatw').eq(i-1).attr('percent') == $('#tblCalculosConsumo .tatw').eq(i).attr('percent') ) == false
            ) {
            indices.push(i);
            
            } 
            
...