Calculo de tabla generada

[erivier]

Buenas, tengo un problema, la verdad es que de javascripts no se absolutamente nada pero aprendo rapido
tengo una tabla generada en PHP con campos que deseo realicen calculos
para empezar he llamado a los campos de la siguiente manera (resumido)

Cant Valor Total
id="1" id="valor1" id="total1"
id="2" id="valor2" id="total2"
id="3" id="valor3" id="total3"

estos pueden variar de acuerdo al filtrado pueden ser 100 o 30 o 20 o 15
siempre el primer campo sera el numero y los demas valor+# y total+#

yo quiero que cuando actualice cant o valor automaticamente calcule total el calculo serial por linea no interfiere la una con la otra

yo lo que desea en el script es que tome el id de cant y luego en el script tome los valores de cant(id=#) y de valor(id="valor"+(id de cant))) y que actualice su respectivo total a fin de no tener que hace o generar un script extenso con calculo para cada fila

[Panino5001]

No entiendo bien tu objetivo. Los valores se actualizan en función a alguna acción del usuario? Porque si no fuera así, mejor hacer los cálculos directamente en php.
Ayudaría que colocaras el html (2 ó 3 renglones de tu tabla) a manera de ejemplo, sumada a una explicación apb (a prueba de brutos, como yo).

[erivier]

si los valores son actualizados manualmente por el usuario tanto "cant" como "valor"

el codigo generado es algo asi

<form name="liquida" method="post" action="">
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Nombre</td>
<td>Cant</td>
<td>Valor</td>
<td>Total</td>
</tr>
<tr>
<td>Perico</td>
<td><label><input name="1" type="text" id="1" size="8" maxlength="8"></label></td>
<td><label><input name="valor1" type="text" id="valor1" size="8" maxlength="8"></label></td>
<td><label><input name="total1" type="text" id="total1" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Juan</td>
<td><label><input name="2" type="text" id="2" size="8" maxlength="8"></label></td>
<td><label><input name="valor2" type="text" id="valor2" size="8" maxlength="8"></label></td>
<td><label><input name="total2" type="text" id="total2" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Pedro</td>
<td><label><input name="3" type="text" id="3" size="8" maxlength="8"></label></td>
<td><label><input name="valor3" type="text" id="valor3" size="8" maxlength="8"></label></td>
<td><label><input name="total3" type="text" id="total3" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Carlos</td>
<td><label><input name="4" type="text" id="4" size="8" maxlength="8"></label></td>
<td><label><input name="valor4" type="text" id="valor4" size="8" maxlength="8"></label></td>
<td><label><input name="total4" type="text" id="total4" size="8" maxlength="8" readonly></label></td>
</tr>
</table>
</form>

[the_web_saint]

Debes usar un evento en el input para llamar a la función javascript, por ejemplo el onchange de el campo cantidad, enviandole el id del mismo a la función para que en ella puedas consultar su valor y actualizar los demás usando su id y concatenandola con las palabras valor y total.

Espero haberte orientado.

Saludos


EDITADO:
Usas el document.getElementById('id'), en javascript para accesar al campo y si después colocas .value, obtienes su valor, de la misma forma le puedes asignar un valor.

[Panino5001]

Podría ser algo así:

Código PHP:

  <form name="liquida" method="post" action="">
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Nombre</td>
<td>Cant</td>
<td>Valor</td>
<td>Total</td>
</tr>
<tr>
<td>Perico</td>
<td><label><input onchange="total1.value=A1.value*valor1.value" name="A1" type="text" id="A1" size="8" maxlength="8"></label></td>
<td><label><input name="valor1" type="text" id="valor1" size="8" maxlength="8" onchange="total1.value=A1.value*valor1.value"></label></td>
<td><label><input name="total1" type="text" id="total1" size="8" maxlength="8" readonly></label></td>
</tr>
</table>
</form> 
   

Tené en cuenta que los valores de atributos html no pueden comenzar con un número (agregué la A por eso)

[erivier]

Gracias por tu pronta ayuda

He realizado lo siguiente pero no me resulta y no se donde esta el horror

<script language="javascript">
function update(id)
{
id = liquida.document.getElementById(id);
cant = liquida.document.getElementById(id).value;
valor = "valor"+id;
total = "total"+id;
valore = liquida.document.getElemenById(valor).value;

totale = 0;
totale.value = cant.value * valore.value;
liquida.document.getElementById(total).value = totale;


}
</script>


<form name="liquida" method="post" action="">
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Nombre</td>
<td>Cant</td>
<td>Valor</td>
<td>Total</td>
</tr>
<tr>
<td>Perico</td>
<td><label><input name="1" type="text" id="1" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valor1" type="text" id="valor1" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="total1" type="text" id="total1" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Juan</td>
<td><label><input name="2" type="text" id="2" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valor2" type="text" id="valor2" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="total2" type="text" id="total2" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Pedro</td>
<td><label><input name="3" type="text" id="3" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valor3" type="text" id="valor3" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="total3" type="text" id="total3" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Carlos</td>
<td><label><input name="4" type="text" id="4" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valor4" type="text" id="valor4" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="total4" type="text" id="total4" size="8" maxlength="8" readonly></label></td>
</tr>
</table>
</form>

[Panino5001]

Ya te dije que no podés usar números como caracter de inicio de atributos html, y te puse un ejemplo.

[erivier]

Disculpa es que no habia refrescado mi pantalla y no lei esa parte ya modifique a lo siguiente

<script language="javascript">
function update(id)
{
id = liquida.document.getElementById(id);
cant = liquida.document.getElementById(id).value;
valor = "valor"+id;
total = "total"+id;
valore = liquida.document.getElemenById(valor).value;

totale = 0;
totale.value = cant.value * valore.value;
liquida.document.getElementById(total).value = totale;


}
</script>

<form name="liquida" method="post" action="">
<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Nombre</td>
<td>Cant</td>
<td>Valor</td>
<td>Total</td>
</tr>
<tr>
<td>Perico</td>
<td><label><input name="A1" type="text" id="A1" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valorA1" type="text" id="valorA1" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="totalA1" type="text" id="totalA1" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Juan</td>
<td><label><input name="A2" type="text" id="A2" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valorA2" type="text" id="valorA2" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="totalA2" type="text" id="totalA2" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Pedro</td>
<td><label><input name="A3" type="text" id="A3" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valorA3" type="text" id="valorA3" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="totalA3" type="text" id="totalA3" size="8" maxlength="8" readonly></label></td>
</tr>
<tr>
<td>Carlos</td>
<td><label><input name="A4" type="text" id="A4" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="valorA4" type="text" id="valorA4" size="8" maxlength="8" onchange="update(this.id)"></label></td>
<td><label><input name="totalA4" type="text" id="totalA4" size="8" maxlength="8" readonly></label></td>
</tr>
</table>
</form>

[the_web_saint]

Código html:

<script language="javascript">
function update(id)
{
document.getElementById("total"+id).value = document.getElementById(id).value *document.getElemenById("valor"+id).value;
 
 
}
</script>
 

[erivier]

Realmente lo intente de esta forma pero no me resulta, como se autogenera con php lo deje como panino lo indico colocandolo en cada campo con su respectivo id

Gracias a todos por su ayuda