Bootstrap 3 y Font Awesome
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> </th>
<th style="width:75%;">Nombre del Producto</th>
<th> </th>
<th> </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> </div>
</td>
</tr>
<!-- DUMMY RECORDS TO REMOVE -->
...
JavaScript
function spinFactory(node, up, down) {
var spinning, delta;
window.addEventListener('mouseup', function () {
stopSpin();
});
function spin() {
node.value = +node.value + delta;
spinning = setTimeout(spin, 500);
}
function stopSpin() {
window.clearTimeout(spinning);
delta = 0;
}
up.addEventListener('mousedown', function spinUp() {
delta = 1;
spin();
});
down.addEventListener('mousedown', function spinDown() {
delta = -1;
spin();
});
}
$('.PNET-spinner').each(function () {
spinFactory(
this.getElementsByTagName('input')[0],
$(this).find('.btn:first-of-type')[0],
$(this).find('.btn:last-of-type')[0]
);
});