2

Estoy haciendo un formulario como tabla para sumar datos de reportes, las sumas que he hecho por fila me ha funcionado todo, pero al momento de querer hacerlo por columna, no he logrado tener éxito y no sé cómo podría hacerlo.

He intentado hacer lo mismo que hice con la suma por fila (que realmente son inputs) y no me ha funcionado. Lo que he intentado les comparto el código pueda que tenga el codigo pero estoy tan enredado que ya no sé qué más hacer

introducir la descripción de la imagen aquí

Lo que quiero es que si por ejemplo escribo en la columna del cajero1 aparezca la suma en total ventas

//---- SCRIPT SUMA--------
function vc() {
  // quitas los puntos (para evitar problemas con los decimales) e inicializa a 0 si el campo esta vacio 
  var num1 = parseFloat(document.getElementById("n1").value.replace(/,/g, '')) || 0;
  var num2 = parseFloat(document.getElementById("n2").value.replace(/,/g, '')) || 0;
  var num3 = parseFloat(document.getElementById("n3").value.replace(/,/g, '')) || 0;
  var num4 = parseFloat(document.getElementById("n4").value.replace(/,/g, '')) || 0;
  var num5 = parseFloat(document.getElementById("n5").value.replace(/,/g, '')) || 0;
  var resultado = num1 + num2 + num3 + num4 + num5;

  resultado.toFixed(2);
  document.getElementById("vct").value = resultado;

  // formatea el resultado para que aparezca igual que los otros numeros
  format(document.getElementById("vct"));
}

function format(input) {
  var num = input.value.replace(/\,/g, '');
  var decimales = "";
  if (num.indexOf(".") >= 0) {
    decimales = "." + num.split(".")[1].substring(0, 2); // sólo nos quedamos con los dos primeros decimales
    num = Math.floor(num); // redondeamos hacia abajo para quedarnos con la parte entera
  }
  if (!isNaN(num)) {
    num = num.toString().split('').reverse().join('').replace(/(?=\d*\,?)(\d{3})/g, '$1,');
    // añadir los decimales al final!
    num = num.split('').reverse().join('').replace(/^[\,]/, '') + decimales;
    input.value = num;
  } else {
    alert('Solo se permiten numeros');
    input.value = input.value.replace(/[^\d\,\.]*/g, '');
  }
}

//-----SUMAS--------
function vcr() {
  var um1 = parseFloat(document.getElementById("vcr1").value.replace(/,/g, '')) || 0;
  var um2 = parseFloat(document.getElementById("vcr2").value.replace(/,/g, '')) || 0;
  var um3 = parseFloat(document.getElementById("vcr3").value.replace(/,/g, '')) || 0;
  var um4 = parseFloat(document.getElementById("vcr4").value.replace(/,/g, '')) || 0;
  var um5 = parseFloat(document.getElementById("vcr5").value.replace(/,/g, '')) || 0;
  var resul = um1 + um2 + um3 + um4 + um5;

  resul.toFixed(2);
  document.getElementById("vcrt").value = resul;
  format(document.getElementById("vcrt"));
}

function ra() {
  var u1 = parseFloat(document.getElementById("rat1").value.replace(/,/g, '')) || 0;
  var u2 = parseFloat(document.getElementById("rat2").value.replace(/,/g, '')) || 0;
  var u3 = parseFloat(document.getElementById("rat3").value.replace(/,/g, '')) || 0;
  var u4 = parseFloat(document.getElementById("rat4").value.replace(/,/g, '')) || 0;
  var u5 = parseFloat(document.getElementById("rat5").value.replace(/,/g, '')) || 0;
  var res = u1 + u2 + u3 + u4 + u5;

  res.toFixed(2);
  document.getElementById("rat").value = res;
  format(document.getElementById("rat"));
}



//------SUMA DE TOTALES----
function su(valor) {
  var total = 0;
  valor = parseFloat(valor); // Convertir el valor a un entero (número).

  total = document.getElementById('spTotal').innerHTML;

  // Aquí valido si hay un valor previo, si no hay datos, le pongo un cero "0".
  total = (total == null || total == undefined || total == "") ? 0 : total;


  total = (parseFloat(total) + parseFloat(valor));

  // Colocar el resultado de la suma en el control "span".
  document.getElementById('spTotal').innerHTML = total.toFixed(2);
}
h1 {
  text-align: center;
}

select {
  text-align-last: center;
  width: 100%;
}

input {
  text-align: center;
}

.ct {
  background: #38A0AA;
  text-align: center;
}

.tt {
  border: none;
  background: transparent;
  width: 120px;
  font-weight: bold;
}
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<form name="sumar" method="post">
  <h1>REPORTES</h1>

  <table>
    <thead>
      <tr>
        <th>Descripción</th>
        <th>CAJERO1</th>

        <th>
          CAJER0\O2</th>

        <th>CAJERO3</th>

        <th>CAJERO4</th>

        <th>CAJERO5</th>


        <th style="text-align: center;">TOTALES</th>
      </tr>



      <tr>
        <th scope="col">Venta contado</th>
        <th><input type="text" maxlength="15" id="n1" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="n2" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="n3" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="n4" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="n5" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
        <th class="ct">L.<input class="tt" id="vct" name="vct" type="text" onkeyup="format(this)" readonly value="0" /></th>
      </tr>

      <tr>
        <th scope="col">Venta credito</th>
        <th><input type="text" maxlength="15" id="vcr1" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="vcr2" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="vcr3" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="vcr4" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="vcr5" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
        <th class="ct">L.<input class="tt" id="vcrt" name="vcrt" onkeyup="format(this)" type="text" readonly value="0" /></th>
      </tr>

      <tr>
        <th scope="col">R. abonos credito</th>
        <th><input type="text" maxlength="15" id="rat1" onKeyUp="ra();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="rat2" onKeyUp="ra();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="rat3" onKeyUp="ra();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="rat4" onKeyUp="ra();format(this)" onchange="format(this)" value="0"></th>
        <th><input type="text" maxlength="15" id="rat5" onKeyUp="ra();format(this)" onchange="format(this)" value="0"></th>
        <th class="ct">L.<input class="tt" id="rat" name="rat" onkeyup="format(this)" type="text" readonly value="0" /></th>
      </tr>

      <tr>
        <th scope="col" class="ct">Totales ventas</th>
        <th class="ct">L.<input class="tt" name="rat" oninput="tt1();format(this)" onchange="format(this)" type="text" readonly value="0" /></th>
        <th class="ct">L.<input class="tt" name="qq" oninput="tt1();format(this)" onchange="format(this)" type="text" readonly value="0" /></th>
        <th class="ct">L.<input class="tt" name="qq" type="text" readonly value="0" /></th>
        <th class="ct">L.<input class="tt" name="qq" type="text" readonly value="0" /></th>
        <th class="ct">L.<input class="tt" name="qq" type="text" readonly value="0" /></th>
        <th class="ct">L.<input class="tt" name="tv" type="text" readonly value="0" /></th>
      </tr>

      <tr>
        <th scope="col">Efectivo</th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
      </tr>

      <tr>
        <th scope="col">T/C 1</th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
      </tr>


      <tr>
        <th scope="col">Tarjeta 2</th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
      </tr>

      <tr>
        <th scope="col">Cobro en cheque</th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th><input type="text" maxlength="15" value="0"></th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
      </tr>


      <tr>
        <th scope="col" class="ct">Totales ingresos</th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
        <th class="ct">
          <LABEL>L.5,000,000</LABEL>
        </th>
      </tr>
    </thead>
  </table>

</form>

1 respuesta 1

1

Para poder ilustrar como realizar la suma vetical, he modificado tú código; Agregué la función "SumTotalVertical()" para realizar la suma de la primer columna "Totales ventas".

<script type="text/javascript">
//---- SCRIPT SUMA--------
function vc() {
  // quitas los puntos (para evitar problemas con los decimales) e inicializa a 0 si el campo esta vacio 
var num1 = parseFloat(document.getElementById("n1").value.replace(/,/g, '')) || 0;
var num2 = parseFloat(document.getElementById("n2").value.replace(/,/g, '')) || 0;
var num3 = parseFloat(document.getElementById("n3").value.replace(/,/g, '')) || 0;
var num4 = parseFloat(document.getElementById("n4").value.replace(/,/g, '')) || 0;
var num5 = parseFloat(document.getElementById("n5").value.replace(/,/g, '')) || 0;
var resultado = num1 + num2 + num3 + num4 + num5;

  resultado.toFixed(2);
  document.getElementById("vct").value = resultado;

  // formatea el resultado para que aparezca igual que los otros numeros
  format(document.getElementById("vct"));
  
  SumTotalVertical();
 
}

function format(input) {
  var num = input.value.replace(/\,/g, '');
  var decimales = "";
  if (num.indexOf(".") >= 0) { 
    decimales = "." + num.split(".")[1].substring(0,2); // sólo nos quedamos con los dos primeros decimales
    num = Math.floor(num); // redondeamos hacia abajo para quedarnos con la parte entera
  }
  if (!isNaN(num)) {
    num = num.toString().split('').reverse().join('').replace(/(?=\d*\,?)(\d{3})/g, '$1,');
    // añadir los decimales al final!
    num = num.split('').reverse().join('').replace(/^[\,]/, '') + decimales;
    input.value = num;
  }
  else {
    alert('Solo se permiten numeros');
    input.value = input.value.replace(/[^\d\,\.]*/g, '');
  }
} 

//-----SUMAS--------
function vcr(){
var um1 = parseFloat(document.getElementById("vcr1").value.replace(/,/g, '')) || 0;
var um2 = parseFloat(document.getElementById("vcr2").value.replace(/,/g, '')) || 0;
var um3 = parseFloat(document.getElementById("vcr3").value.replace(/,/g, '')) || 0;
var um4 = parseFloat(document.getElementById("vcr4").value.replace(/,/g, '')) || 0;
var um5 = parseFloat(document.getElementById("vcr5").value.replace(/,/g, '')) || 0;
var resul = um1 + um2 + um3 + um4 + um5;
 
  resul.toFixed(2);
  document.getElementById("vcrt").value = resul;
  format(document.getElementById("vcrt"));
  
  SumTotalVertical();
  
}

function ra(){
var u1 = parseFloat(document.getElementById("rat1").value.replace(/,/g, '')) || 0;
var u2 = parseFloat(document.getElementById("rat2").value.replace(/,/g, '')) || 0;
var u3 = parseFloat(document.getElementById("rat3").value.replace(/,/g, '')) || 0;
var u4 = parseFloat(document.getElementById("rat4").value.replace(/,/g, '')) || 0;
var u5 = parseFloat(document.getElementById("rat5").value.replace(/,/g, '')) || 0;
var res = u1 + u2 + u3 + u4 + u5;
 
  res.toFixed(2);
  document.getElementById("rat").value = res;
  format(document.getElementById("rat"));
  
  SumTotalVertical();
  
}

function SumTotalVertical(){
  //SUMAR TOTALES VETICAL:
  var t1 = parseFloat(document.getElementById("n1").value.replace(/,/g, '')) || 0;
  var t2 = parseFloat(document.getElementById("vcr1").value.replace(/,/g, '')) || 0;
  var t3 = parseFloat(document.getElementById("rat1").value.replace(/,/g, '')) || 0;
  var resut = t1 + t2 + t3;
  document.getElementById("total1E").value = resut;
}



//------SUMA DE TOTALES----
function su (valor) {
    var total = 0;  
    valor = parseFloat(valor); // Convertir el valor a un entero (número).
    
    total = document.getElementById('spTotal').innerHTML;
    
    // Aquí valido si hay un valor previo, si no hay datos, le pongo un cero "0".
    total = (total == null || total == undefined || total == "") ? 0 : total;
    

    total = (parseFloat(total) + parseFloat(valor));
    
    // Colocar el resultado de la suma en el control "span".
    document.getElementById('spTotal').innerHTML = total.toFixed(2); 
    

}


</script>
<!DOCTYPE html>
<html>
<head>
    <title>Reportes</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<style type="text/css">
    h1{
        text-align: center;
    }

    select{
        text-align-last: center;
        width: 100%;
    }

    input{
        text-align: center;
    }

    .ct{
        background: #38A0AA;
        text-align: center;
    }

    .tt{
        border: none;
        background: transparent;
        width: 120px;
        font-weight: bold;
    }
</style>
<body>
<form name="sumar" method="post">
    <h1>REPORTES</h1>

<table>
    <thead>
        <tr>
            <th>Descripción</th>
            <th>CAJERO1</th>

                <th>
                    CAJER0\O2</th>

                <th>CAJERO3</th>

                <th>CAJERO4</th>

                <th>CAJERO5</th> 


            <th style="text-align: center;">TOTALES</th>     
        </tr>



        <tr>
            <th scope="col">Venta contado</th>
            <th><input type="text" maxlength="15" id="n1" onkeyup="vc();format(this)" onchange="format(this)"  value="0"></th>
            <th><input type="text" maxlength="15" id="n2" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
            <th><input type="text" maxlength="15" id="n3" onkeyup="vc();format(this)" onchange="format(this)"  value="0"></th>
            <th><input type="text" maxlength="15" id="n4" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
            <th><input type="text" maxlength="15" id="n5" onkeyup="vc();format(this)" onchange="format(this)" value="0"></th>
            <th class="ct">L.<input class="tt" id="vct" name="vct" type="text" onkeyup="format(this)"  readonly value="0" /></th>
        </tr>

        <tr>
            <th scope="col">Venta credito</th>
            <th><input type="text" maxlength="15" id="vcr1" onKeyUp="vcr();format(this)" onchange="format(this)"  value="0"></th>
            <th><input type="text" maxlength="15" id="vcr2" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
            <th><input type="text" maxlength="15" id="vcr3" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
            <th><input type="text" maxlength="15" id="vcr4" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
            <th><input type="text" maxlength="15" id="vcr5" onKeyUp="vcr();format(this)" onchange="format(this)" value="0"></th>
            <th class="ct">L.<input class="tt" id="vcrt" name="vcrt" onkeyup="format(this)" type="text" readonly value="0" /></th>
        </tr>

        <tr>
            <th scope="col">R. abonos credito</th>
            <th><input type="text" maxlength="15" id="rat1" onKeyUp="ra();format(this)" onchange="format(this)"  value="0"></th>
            <th><input type="text" maxlength="15" id="rat2" onKeyUp="ra();format(this)" onchange="format(this)"  value="0"></th>
            <th><input type="text" maxlength="15" id="rat3" onKeyUp="ra();format(this)" onchange="format(this)"  value="0"></th>
            <th><input type="text" maxlength="15" id="rat4" onKeyUp="ra();format(this)" onchange="format(this)"  value="0"></th>
            <th><input type="text" maxlength="15" id="rat5" onKeyUp="ra();format(this)" onchange="format(this)"  value="0"></th>
            <th class="ct">L.<input class="tt" id="rat" name="rat" onkeyup="format(this)" type="text" readonly value="0" /></th>
        </tr>

        <tr>
            <th scope="col" class="ct">Totales ventas</th>
            <th class="ct">L.<input class="tt" id="total1E" name="rat" oninput="tt1();format(this)" onchange="format(this)" type="text" readonly value="0" /></th>
            <th class="ct">L.<input class="tt" name="qq" oninput="tt1();format(this)" onchange="format(this)"  type="text" readonly value="0" /></th>
            <th class="ct">L.<input class="tt" name="qq"  type="text" readonly value="0" /></th>
            <th class="ct">L.<input class="tt" name="qq"  type="text" readonly value="0" /></th>
            <th class="ct">L.<input class="tt" name="qq"  type="text" readonly value="0" /></th>
            <th class="ct">L.<input class="tt" name="tv"  type="text" readonly value="0" /></th>
        </tr>

        <tr>
            <th scope="col">Efectivo</th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
        </tr>

        <tr>
            <th scope="col">T/C 1</th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
        </tr>


        <tr>
            <th scope="col">Tarjeta 2</th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
        </tr>

        <tr>
            <th scope="col">Cobro en cheque</th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th><input type="text" maxlength="15" value="0"></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
        </tr>


        <tr>
            <th scope="col" class="ct">Totales ingresos</th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
            <th class="ct"><LABEL>L.5,000,000</LABEL></th>
        </tr>
    </thead>
</table>

</form>
</body>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>

1
  • Era prácticamente lo mismo, amigo muchas gracias!!! llevaba haciendo lo de varias formas y ninguna me resultaba
    – Phatum13
    Commented el 4 ago. 2021 a las 19:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.