JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<table id="tblFCompras" border="1">
        <thead>   
            <tr>
                <th style="width: 40px">#</th>
                <th style="width: 60px">DOCTS</th>
                <th style="width: 70px">N DOC</th>
                <th style="width: 100px">RUT </th>
                <th style="width: 340px">PROVEEDOR DE LA EMPRESA</th>
                <th style="width: 80px">FECHA</th>
                <th style="width: 140px">NO AFECTO</th>
                <th style="width: 140px">NETO</th>
                <th style="width: 140px">O. IMP</th>
                <th style="width: 140px">IVA </th>
                <th style="width: 140px">TOTAL</th>
            </tr>
        </thead>            
        <tbody>
            <tr id="12986"><input type="hidden" value="1;1"><td style="width: 40px" class="edita"><span>1</span><div></div></td><td style="width: 60px" class="edita"><span>FAP</span><div></div></td><td style="width: 70px" class="edita"><span>71790</span><div></div></td><td style="width: 100px" class="edita"><span>76060499-2</span><div></div></td><td style="width: 340px">EDUARDO ESPINOZA ORELL</td><td style="width: 80px" class="edita"><span>05-12-2014</span><div></div></td><td style="width: 140px" class="right">4,642 </td><td style="width: 140px" class="right">25,511     </td><td style="width: 140px" class="right">0  </td><td style="width: 140px" class="right">4,847      </td><td style="width: 140px" class="right">35,000    </td>                      
            </tr>
        <tr id="12987"><input type="hidden" value="1;1"><td style="width: 40px" class="edita"><span>2</span><div></div></td><td style="width: 60px" class="edita"><span>FAP</span><div></div></td><td style="width: 70px" class="edita"><span>63351</span><div></div></td><td style="width: 100px" class="edita"><span>80288500-8</span><div></div></td><td style="width: 340px">DILCO LTDA.</td><td style="width: 80px" class="edita"><span>11-12-2014</span><div></div></td><td style="width: 140px"...

CSS

#tblFCompras tbody, #tblFCompras thead, #tblFCompras tfoot{
        display: block;
    }
    #tblFCompras tbody{
        height: 380px;
        overflow-y:auto;
    }
    
    #tblFCompras tr:hover{
        background-color: #F5BF37;
    }

JavaScript

$(function () {
    $("#tblFCompras > tbody > tr > td.edita").dblclick(function (e) {
        //tblFCompras > tbody > tr > td
        var valor = $(this).find('span').text();
        alert("valor es "+valor);
        e.stopPropagation();        
        var currentEle = $(this).find('span')
        var value = $(this).find('span').html();
        updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
        }
    });

    $(document).click(function () {
            $(currentEle).html($(".thVal").val().trim());
    });
}