Como Sumar Datos con Javascript en campos dinamicos?????

wladtepes · #1 (**permalink**) 16/11/2010, 18:12

hola bueno tengo una clase que genera cajas de texto dinamicamente en javascript (encontre el ejemplo en la web y lo modifique segun mis necesidades) y estos campos son guardados en la BBDD , pero necesito que ademas de generar estos campos dinamicos necesito realizar un calculo entre los digitos que se ingresen en los dos primeras cajas de texto y que el resultado quede en la tercera caja de texto, trate de hacer algo pero no me funciono

Código Javascript:

Ver original<!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=utf-8" />
<title>Documento sin título</title>
<script>
var contLin = 1, tr, td, tabla;
 
function calcular(ID){
uno =document.getElementById('AL'+ID).rows[ID].cells[ID].childNodes[0].value;
dos =document.getElementById('AN'+ID).rows[ID].cells[ID].childNodes[0].value;
alert(uno+'  '+dos);
//dos = document.getElementById('AN'+ID+'');
//document.autoSumForm.Total.value = (uno * 1) + (dos * 1);
}
 
function agregar() {
    //alert (contLin);
    document.getElementById("OcultoContLin").value = contLin;
    //var 
    tabla = document.getElementById('TablaMed');
    tr = tabla.insertRow(tabla.rows.length);
    
    
    td = tr.insertCell(tr.cells.length);
    td.innerHTML =  contLin;
    
    
    td = tr.insertCell(tr.cells.length);
    td.innerHTML =  "<input type='text' size='10' name='AL"+contLin+"' id='AL"+contLin+"' value='AL" + contLin +"'>";
    //alert (document.getElementById(td.innerHTML).id);
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = "<input type='text' size='10' name='AN"+ contLin+"' id='AN"+ contLin +"' value='AN" + contLin +"'>";
    
    
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = "<input type='text' size='10' name='VA"+contLin+"' id='VA"+contLin+"' value='VA" + contLin +"'>";
    
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = "<input type='button' name='B"+contLin+"' id='B"+contLin+"' value='CALCULAR' onClick='calcular("+contLin+")' >";
    
 
    /*
    td = tr.insertCell(tr.cells.length);
    td.innerHTML = "<textarea cols='15' rows='1' id='t" + contLin + "4'>t" + contLin + "4";
    */
    contLin++;
    
}
 
function eliminarultima() {
    ultima = document.getElementById('TablaMed').rows.length - 1;
    
    if(ultima > 0){
        document.getElementById('TablaMed').deleteRow(ultima);
        contLin--;
        document.getElementById("OcultoContLin").value = contLin-1;
        }
}
 
function datosTextos() { 
var textos = ''; 
for (var i=1;i<document.getElementById('TablaMed').rows.length;i++){ 
    for (var j=0;j<4;j++){ 
        if (j==3){
            textos = textos + document.getElementById('TablaMed').rows[i].cells[j].childNodes[0].value;
        
        }else{
        textos = textos + document.getElementById('TablaMed').rows[i].cells[j].childNodes[0].value + '-';
        }
    }
textos = textos + '/';
}
alert(textos);
document.getElementById("OcultoDatoTabla").value = textos;
}
 
</script>
 
<style type="text/css">
<!--
.Estilo1 {font-size: 12px}
.TEXTO {    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #FFFFFF;
}
-->
</style>
</head>
 
<body>
<form id="form1" name="form1" method="get" action="index.php">
 
<table>
  <tr>
  <td>
                                        <select name="tipo" size="1" id="tipo">
                                          <option value="*">Seleccione tipo</option>
                                          <option value="lamina_1">lamina_1</option>
                                          <option value="lamina_2">lamina_2</option>
                                          <option value="lamina_3">lamina_3</option>
                                          <option value="lamina_4">lamina_4</option>
                                          <option value="lamina_5">lamina_5</option>
                                        </select>  
  </td>
  </tr>
  </table>
  
<p>
    <input name="AgregaMed" type="button" id="AgregaMed" value="+" onclick="agregar()" />
    <input name="EliminarMed" type="button" id="EliminarMed" value="-" onclick="eliminarultima()" />
    <input name="OcultoContLin"  id="OcultoContLin"  type="hidden" />
     <input name="OcultoDatoTabla" id="OcultoDatoTabla"  type="hidden" />
    <input name="cadena" type="submit" id="cadena" value="cadena" onclick="datosTextos()" />
    
  </p>
 
  <table   id="TablaMed">
 
    <tr class="Estilo1">
    <td>VENTANA</td>
      <td>ALTO</td>
      <td>ANCHO</td>
      <td >VALOR</td>
          <td ></td>
      </tr>
  </table>
  
</form>
</body>
</html>
 
<?php 
$cadena = $_GET['OcultoDatoTabla'];
$partes = explode("/",$cadena); // divide una cadena segun separador
array_pop($partes); // elimina el ultimo elemento del array
for($i=0;$i<=(count($partes)-1);$i++){
$subpartes = explode("-",($partes[$i])); 
/* CONEXION PARA LA TABLA DE MEDICAMENTOS */
$conexion4 = mysql_connect("localhost", "root", "");
mysql_select_db("veterinaria", $conexion4);
$consulta4= "insert into medicamentos values ('$subpartes[1]', '$subpartes[2]', '$subpartes[3]')";
mysql_query($consulta4, $conexion4);
}
 
 
?>

de antemano gracias por la ayuda

zerokilled · #2 (**permalink**) 16/11/2010, 18:30

te hace falta profundizar en html dom. elementos tienen distintas interfacez, de modo que ciertas funciones/propiedades no la encuentras en otros elementos. notese que el codigo que has modificado trabaja directamente con estructura de tablas. en tu caso, aunque tienes una tabla, en realidad no esta estructurado para que el codigo trabaje en ella. tienes dos opciones: eliminas el codigo que trabaja con la tabla, o estructura tu documento en tablas donde cada campo reside en una celda. si lees acerca de html dom se te hace mas facil comprender la situacion.

wladtepes · #3 (**permalink**) 16/11/2010, 20:05

estuve viendo algo de html dom y esta super complicado

zerokilled · #4 (**permalink**) 16/11/2010, 20:31

pues no tienes otra alternativa que leerlo con calma. ¿que mas crees que has estados modificando? precisamente estas trabajando con DOM y ni siquiera tu mismo lo sabes.