JSFiddle - React, Tailwind, and code Playground
by opeta
HTML
<table class='wrapper' width="800" cellspacing='1' cellpadding='2' >
<tr>
<td width="205" colspan="4" rowspan="2" align="center" class="row1">DADOS APURADOS</td>
<td width="56" rowspan="2" align="center" class="row1">VALOR</td>
<td rowspan="2" class="row1" align="center">DISCRIMINAÇÃO</td>
<td colspan="2" class="row1" align="center">SEM/PROM</td>
</tr>
<tr>
<td width="29" class="row2"><input name="sem1" type="text" id="sem1" size="1"></td>
<td width="53" class="row2"><input name="semdt1" type="text" id="semdt1" value="<?php echo date('Y') ?>" size="3"></td>
</tr>
<tr>
<td width="205" rowspan="7" class="row1" align="center">P<br /> O <br />N <br />T <br />O <br />S <br /><br /><br />
P<br />
O<br />
S<br />
I<br />
T<br />
I<br />
V <br />
O<br />
S</td>
<td width="205" rowspan="4" align="center" class="row1">TEMPO<br />DE<br />SERVIÇO</td>
<td colspan="2" class="row3">FUNÇÃO </td>
<td class="row3">
<input name="t1" type="text" disabled="disabled" id="t1" value="0.10" size="5"></td>
<td width="45" class="row3"><input name="disc1a" type="text" id="disc1a" class="nr" size="9"></td>
<td colspan="2" class="row3"><input name="promo1a" type="text" id="promo1a" class="soma" size="12"></td>
</tr>
<tr>
<td colspan="2" class="row2">PERMANÊNCIA </td>
<td class="row2">
<input name="t2" type="text" disabled="disabled" id="t2" value="0.20" size="5"></td>
<td class="row2"><input name="disc2a" type="text" id="disc2a" class="nr" size="9"></td>
<td colspan="2" class="row2"><input name="promo2a" type="text" id="promo2a" class="soma" size="12"></td>
</tr>
<tr>
<td colspan="2" class="row3">INSTRUTOR</td>
<td class="row3"><input name="t3" type="text" disabled="disabled" id="t3" value="0.25" size="5"></td>
<td class="row3"><input name="disc3a" type="text"...CSS
body {
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
background: #2b2b2b;
}
.wrapper {
margin: 0 auto;
padding: 20px;
max-width: 800px;
}
.table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}
@media screen and (max-width: 580px) {
.table {
display: block;
}
}
.row {
display: table-row;
background: #f6f6f6;
}
.row:nth-of-type(odd) {
background: #e9e9e9;
}
.row.header {
font-weight: 900;
color: #ffffff;
background: #ea6153;
}
.row.green {
background: #27ae60;
}
.row.blue {
background: #2980b9;
}
@media screen and (max-width: 580px) {
.row {
padding: 8px 0;
display: block;
}
}
.cell {
padding: 6px 12px;
display: table-cell;
}
@media screen and (max-width: 580px) {
.cell {
padding: 2px 12px;
display: block;
}
}
.txtdiv{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.row1 {
font-weight: 900;
color: #ffffff;
background: #2980b9;
}
.row2 {
background: #f6f6f6;
}
.row3 {
background: #e9e9e9;
}JavaScript
$(window).load(function(){
// Somente numeros
$('.nr').keyup(function() {
var valor = $(this).val().replace(/[^0-9]+/g,'');
$(this).val(valor);
});
$("#disc1a").keyup(function(){
var quantidade = $(this).val();
var valor = $("#t1").val();
var soma = "";
if ((quantidade != "") && (valor != "")){
soma = (parseFloat(valor) * parseInt(quantidade));
if(isNaN(soma)){
soma = "";
}else{
soma = soma.toFixed(2);
}
}
$("#promo1a").val(soma);
});
$("#disc2a").keyup(function(){
var quantidade = $(this).val();
var valor = $("#t2").val();
var soma = "";
if ((quantidade != "") && (valor != "")){
soma = (parseFloat(valor) * parseInt(quantidade));
if(isNaN(soma)){
soma = "";
}else{
soma = soma.toFixed(2);
}
}
$("#promo2a").val(soma);
});
$("#disc3a").keyup(function(){
var quantidade = $(this).val();
var valor = $("#t3").val();
var soma = "";
if ((quantidade != "") && (valor != "")){
soma = (parseFloat(valor) * parseInt(quantidade));
if(isNaN(soma)){
soma = "";
} if ((soma < "1.50")){
soma = soma.toFixed(2);
}else{
soma = "1.50";
}
}
$("#promo3a").val(soma);
});
$("#disc4a").keyup(function(){
var quantidade = $(this).val();
var valor = $("#t4").val();
var soma = "";
if ((quantidade != "") && (valor != "")){
soma = (parseFloat(valor) * parseInt(quantidade));
if(isNaN(soma)){
soma = "";
}else{
soma = soma.toFixed(2);
}
}
$("#promo4a").val(soma);
});
});
function calcula(){
var valor = 0;
$('.soma').each(function(i){
valor = parseFloat($(this).val()) + valor ;
});
valor = valor.toFixed(2);
$('#total1a').val( valor );
}