Multiplicar valores de un arreglo en html dom

Ilidam · #1 (**permalink**) 27/06/2012, 11:40

Hola amigos... alguien podria ayudarme tengo un pekeño gran problema..
Tengo una tabla creada con js ya me inserta los datos en la base de datos ahora lo k kiero....
primero a la ora de introducir la clave me jale el precio de ese producto de la tabla producto una vez echo eso introducir la cantidad y k me lo multiplike cantidad * precio y el resultado se muestre en total pero como es con arreglo no se como hacerlo se podra????

Código Javascript:

Ver original<?
 
$host = "localhost";
$usuario1 = "root";
$db = "gromero";
$conexion=mysql_connect($host, $usuario1) or die("Error: " . mysql_error());
 
 mysql_select_db($db,$conexion);
$qry =mysql_query("SELECT MAX(folio) AS folio FROM folio");
if ($row = mysql_fetch_row($qry)) {
$id = trim($row[0]);
}
$id2=$id+1;
 
$folio = 'A'.str_pad($id2,4,'0',STR_PAD_LEFT);
echo $id;
echo 'dato' + $qry;
 
 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Enviar Pedido...</title>
 
<style type="text/css">
<!--
html {  background-image: url(images/glowcolor.png); }
#Layer3 {
 
        background-image: url(images/ddc.jpg);
        background-position: center;
    width:800px;
 
 
}
.Estilo16 {font-family: Arial, Helvetica, sans-serif}
-->
    </style>
 
 
<script type="text/javascript">
function alerta(){
alert('desea imprimir')
print();
window.close();
 
}
</script>
 
<script>
var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
var RADIO_NAME = 'totallyrad'; // this is being set via script
var TABLE_NAME = 'tbl'; // this should be named in the HTML
var ROW_BASE = 1; // first number (for display)
var hasLoaded = false;
 
window.onload=fillInRows;
 
function fillInRows()
{
    hasLoaded = true;
    addRowToTable();
    addRowToTable();
}
 
function sumar() {
var n1 = document.tbl.cantidad["value"];
var n2 = document.tbl.precio["value"];
document.tbl.total["value"]=parseFloat(n1)*parseFloat(n2)
 
document.write("Longitud del array: " + miArray.length)
for (i=0;i<miArray.length;i++){
    document.write(miArray[i])
}
}
 
 
function addRowToTable(num)
{
    if (hasLoaded) {
        var tbl = document.getElementById(TABLE_NAME);
        var nextRow = tbl.tBodies[0].rows.length;
        var iteration = nextRow + ROW_BASE;
                if (num == null) {
            num = nextRow;
        } else {
            num + ROW_BASE;
        }
 
 
        var row = tbl.tBodies[0].insertRow(num);
 
        row.className = 'classy' + (iteration % 2);
 
 
 
        var cell1 = row.insertCell(0);
        var txtInp = document.createElement('input');
        txtInp.setAttribute('type', 'text');
        txtInp.setAttribute('name', "articulo[]");
        txtInp.setAttribute('size', '43');
        cell1.appendChild(txtInp);
 
                var cell2 = row.insertCell(1);
        var txtInp = document.createElement('input');
        txtInp.setAttribute('type', 'text');
        txtInp.setAttribute('name', "cantidad[]");
        txtInp.setAttribute('size', '6');
        cell2.appendChild(txtInp);
 
                var cell3 = row.insertCell(2);
        var txtInp = document.createElement('input');
                txtInp.type = 'text'; // 6
                txtInp.name = 'precio[]'; // 6
                txtInp.size = 7;
                txtInp.onkeyup = function(){addHiddenNeto(this.value)}
                txtInp.onfocus = function(){setHiddenNeto(this.value)}
                cell3.appendChild(txtInp);
 
                var cell4 = row.insertCell(3);
        var txtInp = document.createElement('input');
        txtInp.setAttribute('type', 'text');
        txtInp.setAttribute('name', "total[]");
        txtInp.setAttribute('size', '5');
                txtInp.setAttribute("onFocus", 'sumar ()');
        cell4.appendChild(txtInp);
 
 
        var cell5 = row.insertCell(4);
        var btnEl = document.createElement('input');
        btnEl.setAttribute('type', 'image');
        btnEl.setAttribute('src', 'images/borra.jpg');
        btnEl.onclick = function () {deleteCurrentRow(this)};
        cell5.appendChild(btnEl);
 
 
        var cell6 = row.insertCell(5);
        var btnadd = document.createElement('input');
        btnadd.setAttribute('type', 'button');
        btnadd.setAttribute('value', 'AGREGA');
                btnadd.setAttribute('onClick', 'addRowToTable ()');
 
        cell6.appendChild(btnadd);
 
        row.myRow = new myRowObject(txtInp);
    }
}
 
 
 
function deleteCurrentRow(obj)
{
    if (hasLoaded) {
        var delRow = obj.parentNode.parentNode;
        var tbl = delRow.parentNode.parentNode;
        var rIndex = delRow.sectionRowIndex;
        var rowArray = new Array(delRow);
        deleteRows(rowArray);
        reorderRows(tbl, rIndex);
    }
}
 
 
function deleteRows(rowObjArray)
{
    if (hasLoaded) {
        for (var i=0; i<rowObjArray.length; i++) {
            var rIndex = rowObjArray[i].sectionRowIndex;
            rowObjArray[i].parentNode.deleteRow(rIndex);
        }
    }
}
 
 
</script>
 
<style type="text/css">
<!--
#tbl td, th { padding: 0.5em; }
.classy0 { background-color: #234567; color: #89abcd; }
.classy1 { background-color: #89abcd; color: #234567; }
-->
</style>
 
<script type="text/javascript">
function MostrarFecha()
   {
   var nombres_dias = new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado")
   var nombres_meses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre")
 
   var fecha_actual = new Date()
 
   dia_mes = fecha_actual.getDate()
   dia_semana = fecha_actual.getDay()
   mes = fecha_actual.getMonth() + 1
   anio = fecha_actual.getFullYear()
 
 
   document.write( dia_mes + " de " + nombres_meses[mes - 1] + " de " + anio)
   }
 
</script>
</head>
 
<body>
    <center>
    <div id="Layer3">
        <fieldset>
<table style=' color:white '  align="center">
 
    <td  align="right"><a href="cerrarsesion.php"><font face="calibri" color="#FFFFFF">CERRAR SESION</font></a></td>
  <tr>
    <td><table>
      <tr>
        <td><div align="center">
          <table style=' color:white ' width="40%" border="0" align="right">
            <tr>
                <!-- Para que muestre la fecha -->
               <font color="white"> <p align="right"> <strong> FECHA: </strong>
<script language="JavaScript" type="text/javascript">
 MostrarFecha();
</script><p align="left" <td width="14%"> <strong> ADMIN:  </strong></td></p>
</p> </font>
 
            </tr>
 
 
          </table>
        </div></td>
      </tr>
      <tr>
        <td><form name="tbl" action="incompra.php" method="post">
                <strong><p align="center"><font color="white">DATOS DE COMPRA </font></p> </strong>
<table style=' color:white '  id="tbl" align="center">
 
    <tr>
    <td colspan="4"><p align="right">FOLIO:</p>   </td>
         <td colspan="4"><label>
      <input name="folio" type="text" id="folio" value="<?php echo $folio; ?>" readonly="readonly"/>
    </label></td>
  </tr>
    <tr>
    <td colspan="4"><p align="right">No. FACTURA:</p>   </td>
         <td colspan="4"><label>
      <input name="factura" type="text" onKeyUp="this.value = this.value.toUpperCase();"/>
    </label></td>
  </tr>
    <tr>
        <td>
 <p align="center">
     <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <?php
    $sql = "Select nombre from proveedor ";
    $result = mysql_query( $sql);
?>
         <font face="calibri" color="#FFFFFF"> PROVEEDOR </font> <select name="nombre"  tabindex="marca" style="width:290px">
 
    <option>-----------SELECCIONE PROVEEDOR-----------</option>
<?php    while ( $row = mysql_fetch_array($result) ) {?>
    <option style='text-transform: uppercase'> <?php echo $row[0];?>  </option>
        <?php } ?>
</select>
      </label>
    </p>
</td>
  </tr>
 
 
 <tr>
    <th>ARTICULO</th><th>CANTIDAD</th><th>PRECIO</th><th>TOTAL</th><th>BORRAR</th><th>AGREGAR</th>
 
  </tr>
 
</table>
                <br/>
                <center>
<input type="image" src="images/continuar_id.gif"  type="submit" value="imprimir Factura" />
</center>
            </form></td>
      </tr>
    </table></td>
  </tr>
 
</table>
       </fieldset>
 
    </div></center>
<br/>
 
</body>
</html>

arthurhdez91 · #2 (**permalink**) 26/07/2012, 09:00

hola este es el javascript que suma y multiplica los array

Código Javascript:

Ver originalfunction sumacampos()
{
   //declaro variable que almacenara la suma total
    var suma = 0;
    //declaro variable que almacenara la multiplicacion total
    var mult = 0;
    var total=0;
    //el "CampoaSumar" son los campos textBox que se sumaran
    for(var i=0; i < document.tbl.CampoaSumar.length; i++)
    {
        //Comparo el id del campo en que me encuentro no lo sumo y sumar los demas 
        if(eval("document.getElementById('precio').id") != eval("document.tbl.CampoaSumar["+i+"].id") )
            {
 
            //Recorro el vector de los campos y realizo la suma
            suma = suma + parseFloat(eval("document.tbl.CampoaSumar["+i+"].value"));
        }
         
    }
         //Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
         document.getElementById('MiLabelTOTAL').innerHTML = suma;
    for(var i=0; i< document.tbl.CampoaSumar.length; i++)
    {
    if(document.tbl.cantidad[i].value == ""){
            this.document.tbl.cantidad[i].value = 0;
        }
        if(document.tbl.precio[i].value == ""){
            this.document.tbl.precio[i].value = 0;
        }
        mult = parseFloat(eval("document.tbl.cantidad["+i+"].value")); //le asigno el valor de la cantidad
            mult = mult * parseFloat(eval("document.tbl.precio["+i+"].value")); //hago la multiplicacion
        document.tbl.total[i].value = mult; //llevo el total a al al input
        total=total+mult;
        this.document.getElementById('labelTOTAL').innerHTML = total;
    }
 
}

debes de cambiar los nombres en estos tres asi

Código Javascript:

Ver originalvar cell2 = row.insertCell(1);
            var txtInp = document.createElement('input');
            txtInp.setAttribute('type', 'text');
            txtInp.setAttribute('name', "CampoaSumar");
        txtInp.setAttribute('id', 'cantidad');
        txtInp.setAttribute('onblur', "sumacampos();");
            txtInp.setAttribute('size', '6');
            cell2.appendChild(txtInp);
     
                    var cell3 = row.insertCell(2);
            var txtInp = document.createElement('input');
                    txtInp.type = 'text'; // 6
                    txtInp.name = 'CampoaSumar'; // 6
            txtInp.setAttribute('id', 'precio');
            txtInp.setAttribute('onblur', "sumacampos();");
                    txtInp.size = 7;
                    txtInp.onkeyup = function(){addHiddenNeto(this.value)}
                    txtInp.onfocus = function(){setHiddenNeto(this.value)}
                    cell3.appendChild(txtInp);
     
                    var cell4 = row.insertCell(3);
            var txtInp = document.createElement('input');
            txtInp.setAttribute('type', 'text');
            txtInp.setAttribute('name', "total");
        txtInp.setAttribute('id', "total");
            txtInp.setAttribute('size', '5');
            cell4.appendChild(txtInp);

y en la tabla colocas algo como esto de abajo y te queda funcionando como tu lo quieres lo que pasa es que no te va a cargar desde el primer items sino desde el segundo estoy mirando como solucionarlo por que no me da espero y te sirva de algo jejeje te lo iba a dejar todo pero dice que es muy largo para colocarlo soy nuevo en este foro....es que se vio interesante hacerlo

Código HTML:

Ver original<tr>
        <th>ARTICULO</th><th>CANTIDAD</th><th>PRECIO</th><th>TOTAL</th><th>BORRAR</th><th>AGREGAR</th>
     
      </tr>
     
    </table>
<table style=' color:blue ' id="tbl1" align="center">
<tr>
<th>Total Cantidad: <label id="MiLabelTOTAL" >0</label></th>
<td><th>Total: <label id="labelTOTAL" >0</label></th></td>
</tr>
<tr>
</tr>
</table>

Ilidam · #3 (**permalink**) 23/08/2012, 10:02

Hola arthurhdez91 muchas gracias por la respuesta aunque no lo habia checado esta muy bien...puede resolver el proble y me esta funcionando perfectamente aunke le echare un vistazo a tu codigo = y se puede hacer muchas cosas mas con esto y pues si es muy interesente este tema saludos...