表格中.列一加列二.自动算出列三的值(列一加列二)
1,2输入的都是金额数字
<table height=575 id= "tb1 " name= "tb1 ">
<tr> <td> 数字一 </td> <td> 数字二 </td> <td> 数字三 </td> </tr>
<tr> <td> <input1 ..> </td> <td> <input2 ..> </td> <td> <input 3..> </td> </tr>
</table>
1.像这样一个表格.当输入数字一和数字二列的input.数字三的列自动为这两个数相加 (50)
2.因为 <tr> <td> <input1 ..> </td> <td> <input2 ..> </td> <td> <input 3..> </td> </tr>
是动态生成的.就会出现有时候有.有时候无的情况.这样又怎么解决 (50)
用javascript怎么行能得到呢??请教
[解决办法]
1、输入的就在onkeyup里写代码
2、动态生成的时候直接将input3的值用前面两个的相加 <input name=input3 value= <%=input1+input2%> 假设input1和input2是前面两个的变量。
[解决办法]
var table1=document.getElementById( "tb1 "); //这个是你的表
var rows=table1.rows; //这个是你的表内行的集合
for (i=0;i <=rows.length-1;i++){
var input1=rows[i].childNodes[0].firstChild; //每一行第一列的input
var input2=rows[i].childNodes[1].firstChild; //每一行第二列的input
var input3=rows[i].childNodes[2].firstChild; //每一行第三列的input
if (input1 && input2) //input1和2是否存在
input3.value=input1.value+input2.value;
}
随手写，未测试
[解决办法]
<table border= "1 ">
<tr>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.nextSibling.childNodes[0].value=this.parentNode.nextSibling.childNodes[0].value*this.value ">
</td>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.childNodes[0].value=this.parentNode.previousSibling.childNodes[0].value*this.value ">
</td>
<td> <input value= "0 " readonly>
</td>
</tr>
<tr>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.nextSibling.childNodes[0].value=this.parentNode.nextSibling.childNodes[0].value*this.value ">
</td>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.childNodes[0].value=this.parentNode.previousSibling.childNodes[0].value*this.value ">
</td>
<td> <input value= "0 " readonly>
</td>
</tr>
<tr>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.nextSibling.childNodes[0].value=this.parentNode.nextSibling.childNodes[0].value*this.value ">
</td>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.childNodes[0].value=this.parentNode.previousSibling.childNodes[0].value*this.value ">
</td>
<td> <input value= "0 " readonly>
</td>
</tr>
</table>
[解决办法]
SORRY是加法，你把上面的乘号改成加号就可以了
[解决办法]
<table border= "1 ">
<tr>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.nextSibling.childNodes[0].value=parseInt(this.parentNode.nextSibling.childNodes[0].value,10)+parseInt(this.value,10) ">
</td>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.childNodes[0].value=parseInt(this.parentNode.previousSibling.childNodes[0].value,10)+parseInt(this.value,10) ">
</td>
<td> <input value= "0 " readonly>
</td>
</tr>
<tr>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.nextSibling.childNodes[0].value=parseInt(this.parentNode.nextSibling.childNodes[0].value,10)+parseInt(this.value,10) ">
</td>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.childNodes[0].value=parseInt(this.parentNode.previousSibling.childNodes[0].value,10)+parseInt(this.value,10) ">
</td>
<td> <input value= "0 " readonly>
</td>
</tr>
<tr>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.nextSibling.childNodes[0].value=parseInt(this.parentNode.nextSibling.childNodes[0].value,10)+parseInt(this.value,10) ">
</td>
<td> <input value= "0 " onkeyup= "this.parentNode.nextSibling.childNodes[0].value=parseInt(this.parentNode.previousSibling.childNodes[0].value,10)+parseInt(this.value,10) ">
</td>
<td> <input value= "0 " readonly>
</td>
</tr>
</table>
[解决办法]
考虑了一下input不存在和非数值输入的情况，增加了一些判断。
另外：我和hbhbhbhbhb1021(天外水火(我要多努力)) 的在FF下都不能正常工作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 ">
<title> 无标题文档 </title>
<script>
function count(obj){
var input1=obj.parentNode.parentNode.childNodes[0].firstChild;
if (!input1) return;
var input2=obj.parentNode.parentNode.childNodes[1].firstChild;
if (!input2) return;
if (input1.value== " " || input2.value== " ") return;
if (isNaN(input1.value) || isNaN(input2.value)) return;
var input3=obj.parentNode.parentNode.childNodes[2].firstChild;
input3.value=parseFloat(input1.value)+parseFloat(input2.value);
}
</script>
</head>
<body>
<table width= "70% " border= "0 " cellspacing= "0 " cellpadding= "0 ">
<tr>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 " onkeyup= "count(this); "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 " onkeyup= "count(this); "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 "> </td>
</tr>
<tr>
<td width= "33% "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 " onkeyup= "count(this); "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 "> </td>
</tr>
<tr>
<td width= "33% "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 " onkeyup= "count(this); "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 "> </td>
</tr>
<tr>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 " onkeyup= "count(this); "> </td>
<td width= "33% "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 "> </td>
</tr>
<tr>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 " onkeyup= "count(this); "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 " onkeyup= "count(this); "> </td>
<td width= "33% "> <input name= "textfield " type= "text " size= "10 "> </td>
</tr>
</table>
</body>
</html>
[解决办法]
---能不能再和我改改.前面有五个input type=text 相加得到的数在第六个input type=text里显示
TO 楼主
<table border= "1 ">
<tr> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " readonly> </td> </tr>
<tr> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " readonly> </td> </tr>
<tr> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " onkeyup= "show(this) "> </td> <td> <input value= "0 " readonly> </td> </tr>
</table>
<script language=javascript>
function show(obj)
{
var objTr=obj.parentNode.parentNode
var count=0;
for(var i=0;i <objTr.childNodes.length-1;i++)
{
count=parseInt(count,10)+parseInt(objTr.childNodes[i].childNodes[0].value,10);
}
objTr.childNodes[objTr.childNodes.length-1].childNodes[0].value=count
}
</script>
[解决办法]
简化版
----------------------
<table height=575 id= "tb1 " name= "tb1 ">
<tr> <td> 数字一 </td> <td> 数字二 </td> <td> 数字三 </td> </tr>
<tr> <td> <input type= "text "> </td> <td> <input type= "text "> </td> <td> <input type= "text "> </td> </tr>
</table>
<script type= "text/javascript ">
var table = document.getElementById( "tb1 ");
for(var i=1;i <table.rows.length;i++){
var row = table.rows[i];
row.cells[2].firstChild.readOnly= "true ";
row.cells[0].firstChild.onchange=row.cells[1].firstChild.onchange=function(){
row.cells[2].firstChild.value=row.cells[0].firstChild.value*1 + row.cells[1].firstChild.value*1;
}
}
</script>