js获取表单数据后进行计算，并在同页面显示

<!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>无标题文档</title>
<script type="text/javascript">
window.onload=function(){
var arr=[];
var tr=[document.getElementById("t1"),document.getElementById("t2"),document.getElementById("t3")];
for(var i=0;i<8;i++){
var input=document.createElement("input");
input.type='text';
document.body.insertBefore(input,document.getElementById("test"));
arr.push(input)
}
var subs=document.createElement("input");
subs.type='button';
subs.onclick=function(){
var k=0;
k=0.5*(0.3*arr[0].value+0.2*arr[1].value+0.1*arr[2].value+0.4*arr[3].value)+0.3*(0.6*arr[4].value+ 0.4*arr[5].value)+0.2*arr[6].value+ arr[7].value;
if(k>=10&&k<=20){
tr[0].style.backgroundColor='blue';
tr[0].innerHTML='XXXXX';
tr[1].innerHTML='YYYYY';
tr[2].innerHTML='ZZZZ';
}else{
tr[0].style.backgroundColor='green';
tr[0].innerHTML='AAAAA';
tr[1].innerHTML='BBBBB';
tr[2].innerHTML='CCCC';
}
}
subs.value='提交';
document.body.insertBefore(subs,document.getElementById("test"));
}
</script>
</head><body>
<table id="test">
<tbody>
     <tr>
         <td id="t1"></td>
        </tr>
        <tr>
         <td id="t2"></td>
        </tr>
        <tr>
         <td id="t3"></td>
        </tr>
    </tbody>
</table>
</body>
</html>
类似这样试试

解决方案 »

  1.   

    谢谢楼上的，不过实在不好意思，我水平太差，还是不太会改。我的页面结构是下面这样的
    获取canshu1 到canshu7 七组单选按钮的值，还有canshu8 的复选按钮的值（选一个值为10，选两个为20）。点击“评估”按钮后，以上八个值通过公示0.5*（0.3A+0.2B+0.1C+0.4D）+0.3*（0.6E+ 0.4F）+0.2* G+ H 进行计算，根据计算结果的不同，下面“输出结果”的三行分别显示不同的文本内容，其中第一行的背景还有相应变化。
    代码具体如下：请问该如何修改啊，谢谢！
    <form name="form1" action="#">
    <table>
      <tr>
        <td colspan="2">指标</td>
      </tr>
      <tr>
        <td >参数1</td>
        <td>AA<input type="radio" name="canshu1" value="10" />
          BB<input type="radio" name="canshu1" value="35" />
        CC<input type="radio" name="canshu1" value="65" /></td>
      </tr>
      <tr>
        <td>参数2</td>
        <td>DD<input type="radio" name="canshu2" value="10" />
        EE<input type="radio" name="canshu2" value="35" />
        FF<input type="radio" name="canshu2" value="65" /></td>
      </tr>
      <tr>
        <td>参数3</td>
        <td>HH<input type="radio" name="canshu3" value="10" />
        II<input type="radio" name="canshu3" value="35" />
        JJ<input type="radio" name="canshu3" value="65" /></td>
      </tr>
      <tr>
        <td>参数4</td>
        <td>KK<input type="radio" name="canshu4" value="10" />
        LL<input type="radio" name="canshu4" value="35" />
        MM<input type="radio" name="canshu4" value="65" /></td>
      </tr>
      <tr>
        <td>参数5</td>
        <td>NN<input type="radio" name="canshu5" value="10" />
        OO<input type="radio" name="canshu5" value="35" /></td>
      </tr>
      <tr>
        <td>参数6</td>
        <td>PP<input type="radio" name="canshu6" value="10" />
        QQ<input type="radio" name="canshu6" value="35" />
    </td>
      </tr>
      <tr>
        <td>参数7</td>
        <td>RR<input type="radio" name="canshu7" value="0" />
        SS<input type="radio" name="canshu7" value="10" /></td>
      </tr>    
      <tr>
        <td>参数8</td>
        <td>TT<input type="checkbox" name="canshu8" value="10" />
        UU<input type="checkbox" name="canshu8" value="10" /></td>
      </tr>
      <tr>
        <td><input type="submit" name="Submit" value="评估" />
        <input type="reset" name="Submit2" value="清除" />
      </tr>   
      <tr>
        <td colspan="2">计算结果</td>
      </tr>  
      <tr>
        <td>输出1</td>
        <td id="text1">&nbsp;</td>
      </tr>  
      <tr>
        <td>输出2</td>
        <td>&nbsp;</td>
      </tr>  
      <tr>
        <td>输出3</td>
        <td>&nbsp;</td>
      </tr> 
    </table>
    </form>