Bootstrap 3 y Font Awesome

by Leandro1981

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<table id="product_list" class="table table-hover table-condensed">
            <thead class="PNET-table-header">
                <th>&nbsp;</th>
                <th style="width:75%;">Nombre del Producto</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
                <th>Cantidad</th>
                <th style="width:25%;">Precio Unitario</th>
            </thead>    

            <tbody>

                <tr>
                    <td class="text-center">
                        <input type="checkbox" value="">
                    </td>
                    <td>Nombre del Producto 1</td>
                    <td><span class="glyphicon glyphicon glyphicon-zoom-in PNET-color"></span></td>
                    <td>
                        <img data-src="holder.js/50x50" alt="Logo" class="img-rounded" /></td>
                    <td>
                        <div class="input-group input-group-sm PNET-spinner">
                            <input type="text" class="form-control PNET-spinner-disabledwhite" value="1" readonly>
                            <div class="PNET-input-group-btn-vertical">
                                <button class="btn btn-default btn-xs"><i class="fa fa-caret-up"></i></button>
                                <button class="btn btn-default btn-xs"><i class="fa fa-caret-down"></i></button>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="text-right"><strong>$88.888,88</strong>&nbsp;</div>
                                             

                    </td>

                </tr>

                <!-- DUMMY RECORDS TO REMOVE -->
               ...

JavaScript

var timeout;

$('.PNET-spinner .btn:first-of-type').on('mousedown', function () {
        timeout = setInterval(function () {
          var numupdown = $('.PNET-spinner input', $(this).closest("tr"));
        var inputValue = parseInt($(numupdown).val(), 10);
        inputValue++;
            $(numupdown).val(inputValue);
    }, 100);

    return false;
    
    


    });
    $('.PNET-spinner .btn:last-of-type').on('mousedown', function () {
           timeout = setInterval(function () {
               var numupdown = $('.PNET-spinner input', $(this).closest("tr"));
                var inputValue = parseInt($(numupdown).val(), 10);
        if (inputValue > 1) {
            inputValue--;
$(numupdown).val(inputValue);
        }
    }, 100);

    return false;
        
        
 
    });

$('.PNET-spinner .btn:last-of-type').mouseup(function () {
    clearInterval(timeout);
    return false;
});
$('.PNET-spinner .btn:last-of-type').mouseout(function () {
    clearInterval(timeout);
    return false;
});