关于用javascript 自动计算的问题

自动记算
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>+  =</title>
</head>
<script type="text/javascript">
function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){

  fi= document.getElementsByName("firstBox");
  //alert(fi[0].value)
  se = document.getElementsByName("secondBox");
  thi = document.getElementsByName("thirdBox");
  for (i=0;i<fi.length;i++){
    thi[i].value=((fi[i].value)*1)+((se[i].value)*1);
  }
  //two = document.autoSumForm.secondBox.value;
  //document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}
</script>
<form name="autoSumForm">
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox"><br>
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox"><br>
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox">
</form>
<p>　</p>
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>+  =</title>
</head>
<script type="text/javascript">
function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  //alert("yy");
  fi= document.getElementsByName("firstBox");
  //alert(fi[0].value)
  se = document.getElementsByName("secondBox");
  thi = document.getElementsByName("thirdBox");
  for (i=0;i<fi.length;i++){
    thi[i].value=((fi[i].value)*1)+((se[i].value)*1);
  }
  //two = document.autoSumForm.secondBox.value;
  //document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}
function app(){
  o=document.getElementById("aa");
  str=o.innerHTML;
  //alert(str);
  o1=document.getElementById("bb");
  //alert(o1.html);
  o1.innerHTML= o1.innerHTML+"</br>"+str;}
</script>
<form name="autoSumForm" id="form1">
<div id="aa"><input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox"><br></div>
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox"><br>
<div id="bb"><input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox"></div>
<input type="button" value="append" onclick="app();">
</form>
<p>　</p>
</body>
</html>
//期待楼下有更好的办法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>+  =</title>
</head>
<script type="text/javascript">
function startCalc(){
var ind = parseInt((event.srcElement.sourceIndex - 7)/4);
  interval = setInterval("calc("+ind+")",1);
}
function calc(i){

  fi= document.getElementsByName("firstBox");
  //alert(fi[0].value)
  se = document.getElementsByName("secondBox");
  thi = document.getElementsByName("thirdBox");
  //for (i=0;i<fi.length;i++){
    thi[i].value=((fi[i].value)*1)+((se[i].value)*1);
  //}
  //two = document.autoSumForm.secondBox.value;
  //document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
//var ind = (event.srcElement.sourceIndex - 7)%3;
  clearInterval(interval);
}
function comput()
{
var result = 0;
var thirds = document.getElementsByName("thirdBox");
for (var i=0;i< thirds.length; i++)
{
  result += parseFloat(thirds[i].value);
}
alert(result);}
</script>
<form name="autoSumForm">
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox"><br>
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox"><br>
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> =
<input type=text name="thirdBox">
<input type=button value="计算" onclick="comput()">
</form>
<p>　</p>
</body>
</html>
看看是不是这样

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>+  =</title>
</head>
<script type="text/javascript">
function startCalc(){
  interval = setInterval("calc()",1);}
function calc(){
  //alert("yy");
  fi= document.getElementsByName("firstBox");
  //alert(fi[0].value)
  se = document.getElementsByName("secondBox");
  thi = document.getElementsByName("thirdBox");
  for (i=0;i<fi.length;i++){
    thi[i].value=((fi[i].value)*1)+((se[i].value)*1);
  }
  //two = document.autoSumForm.secondBox.value;
  //document.autoSumForm.thirdBox.value = (one * 1) + (two * 1);
}
function stopCalc(){
  clearInterval(interval);
}
function app(){
  o=document.getElementById("aa");
  str=o.innerHTML;
  //alert(str);
  o1=document.getElementById("bb");
  //alert(o1.html);
  o1.innerHTML= o1.innerHTML+"</br>"+str;
}function sum(){//加总
  thi = document.getElementsByName("thirdBox");
  tot = document.getElementsByName('totalBox');
  tot[0].value="0";
  for(i=0;i<thi.length;i++){
    if(thi[i].value!=''){
      tot[0].value=tot[0].value*1+thi[i].value*1;
}
  }
}
</script>
<form name="autoSumForm" id="form1">
<div id="aa"><input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();sum();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();sum();"> =
<input type=text name="thirdBox"><br></div>
<input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();sum();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();sum();"> =
<input type=text name="thirdBox"><br>
<div id="bb"><input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();sum();"> +
<input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();sum();"> =
<input type=text name="thirdBox"></div>
<input type="button" value="append" onclick="app();sum()"><span style="margin-left:262px">sum:<input type="text" name="totalBox" value="0"></span>
</form>
<p>　</p>
</body>
</html>

谢谢大家的回复。问题由yiran5467(依苒）回复的最标准，我一会按功劳给分
不过还有个问题请教下大家（会继续给分）

melodywithme()和 adverse(King)也回复的非常好，谢谢你们

再就是一个查询的问题关于表格的问题  比如第一列有的占3行有的占5行而其他列都是占一行的  象一般的查询所有列都占一行非常容易实现，而这种情况我不知道该怎么办，高手们帮解决解决。
例如，下面这个例子是填表时候的样子这样好实现但是把它们提交到数据库后  还想按这个样子查询出来，该怎么实现呢？<table  border="1" align="center"  bgcolor="#CCFFFF" class="greenfont">
<tr><td height="24" colspan="5" align="center"><strong> 计划部分</strong></td>
<td colspan="2"  align="center"><strong>自评价部分</strong></td>
<td colspan="2" align="center"><strong>分管领导评价部分</strong></td></tr>
<tr><td width="28" height="58" align="center">序号</td>
<td width="13" align="center">分类</td><td width="237" align="center">本周计划内容</td><td width="28" align="center">重要<br>程度</td>
                         <td width="237">        计划完成时间及进程 </td>
  <td width="237" height="58" align="center">完成情况评价 </td>
                         <td width="28">完成程度评分</td>
                         <td width="125" align="center">完成情况评价</td>
                         <td width="168">完成程度评分</td>
                       </tr>
                       <tr>
                         <td height="55"><input name="xuhao1" type="text"  value="01" size="4"></td>
                         <td rowspan="5" align="center">重<br>要<br>部<br>分</td>
                         <td height="55"><textarea name="content1" cols="32" rows="3" > </textarea></td>
                         <td height="55"><input name="zhongyao1" type="text" size="4" ></td>
                         <td height="55"><textarea name="jihua2" cols="32" rows="3" > </textarea></td>
                         <td height="55"><textarea name="pingjia1" cols="32" rows="3" > </textarea></td>
                         <td height="55"><input name="wancheng1" type="text" size="4"></td>
                         <td><textarea name="qingkuang1" cols="16" rows="3" > </textarea></td>
                         <td><input name="pingfen1" type="text" size="4"></td>
                       </tr>
                       <tr>
                         <td height="25"><input name="xuhao2" type="text"  value="02" size="4"></td>
                         <td height="25"><textarea name="content2" cols="32" rows="3" > </textarea></td>
                         <td height="25"><input name="zhongyao2" type="text"  size="4" ></td>
                         <td height="25"><textarea name="jihua2" cols="32" rows="3" > </textarea></td>
                         <td height="25"><textarea name="pingjia2" cols="32" rows="3" > </textarea></td>
                         <td height="25"><input name="wancheng2" type="text" class="downborder"  size="4" ></td>
                         <td><textarea name="qingkuang2" cols="16" rows="3" > </textarea></td>
                         <td><input name="pingfen2" type="text" size="4" ></td>
                       </tr>
                       <tr>
                         <td height="57"><input name="xuhao3" type="text"  value="03" size="4"></td>
                         <td height="57"><textarea name="content3" cols="32" rows="3" > </textarea></td>
                         <td height="57"><input name="zhongyao3" type="text"  value=" " size="4" ></td>
                         <td height="57"><textarea name="jihua3" cols="32" rows="3" > </textarea></td>
                         <td height="57"><textarea name="pingjia3" cols="32" rows="3"  id="pingjia3" > </textarea></td>
                         <td height="57"><input name="wancheng3" type="text"  value=" " size="4" ></td>
                         <td><textarea name="qingkuang3" cols="16" rows="3" > </textarea></td>
                         <td><input name="pingfen3" type="text" id="pingfen3" value=" " size="4" ></td>
                       </tr>
                       <tr>
                         <td height="55"><input name="xuhao4" type="text" class="downborder" id="xuhao4" value="04" size="4">
                         </td>
                         <td height="55"><textarea name="content4" cols="32" rows="3" > </textarea></td>
                         <td height="55"><input name="zhongyao4" type="text"  value=" " size="4" ></td>
                         <td height="55"><textarea name="jihua4" cols="32" rows="3" > </textarea></td>
                         <td height="55"><textarea name="pingjia4" cols="32" rows="3" > </textarea></td>
                         <td height="55"><input name="wancheng4" type="text"  value=" " size="4" ></td>
                         <td><textarea name="qingkuang4" cols="16" rows="3" > </textarea></td>
                         <td><input name="pingfen4" type="text" value=" " size="4"></td>
                       </tr>

做过的一个例子，其中ds是类似于ResultSet的集合，你可以根据需要适当修改
<table id="tb" width="100%" border=0 cellSpacing=1 cellPadding=3 class=deep>
<tr>
<th noWrap="true" class="til" align="center"><font color="black"><b>选择</b></font></th>
<th noWrap="true" class="til" align="center"><b>学号</b></th>
<th noWrap="true" class="til" align="center"><b>姓名</b></th>
<th noWrap="true" class="til" align="center"><b>学院</b></th>
<th noWrap="true" class="til" align="center"><b>专业</b></th>
<th noWrap="true" class="til" align="center"><b>类型</b></th>
<th noWrap="true" class="til" align="center"><b>申报日期</b></th>
<%-- <th noWrap="true" class="til" align="center"><b>院系所号</b></th>--%>
</tr>
<tr>
<td height=5 colspan="15" background='<%=request.getContextPath()%>/js/images/theme/toolbrbk.gif'>
<img src="<%=request.getContextPath()%>/images/clear.gif" width="1" height="1"></td>
</tr>
<%while(ds.next())
{
String rowid = ds.getString("ECNUROWID");
DataSet dds = (DataSet) lx.get(rowid);
size = dds.getRowCount()>1?dds.getRowCount():1;
count = size+1;
%><tr>
<td width="32" class="itemnum" rowspan="<%=size%>">
<input type="checkbox" id="rowid" name="rowid" class="check" value="<%=rowid %>">
</td>
<td class="lightcell" rowspan="<%=size%>">
<a href="<%=path%>/student/EmphasesManageAction.do?method=showEmphasesManageDetail&rowid=<%=rowid%>&lsh=<%=rowid%>"><%=ds.getString("XH") == null ? "&nbsp" : ds.getString("XH")%></a>
</td>
<td class="lightcell" rowspan="<%=size%>"><%=ds.getString("XM") == null ? "&nbsp" : ds.getString("XM")%></td>
<td class="lightcell" rowspan="<%=size%>"><%=ds.getString("YXMC") == null ? "&nbsp" : ds.getString("YXMC")%></td>
<td class="lightcell" rowspan="<%=size%>"><%=ds.getString("ZYMC") == null ? "&nbsp" : ds.getString("ZYMC")%></td>
<%if(dds.getRowCount() > 0)
{
if(dds.next())
{%>
<td class="lightcell" rowspan=1><%=dds.getString("MC") == null ? "&nbsp" : dds.getString("MC")%></td>
  <%    }
   }
   else
   {
   %><td class="lightcell" rowspan="<%=size%>"> </td><%
   }%>
<td class="lightcell" rowspan="<%=size%>"><%=ds.getString("SBRQ") == null ? "&nbsp" : ds.getString("SBRQ")%></td>
<td class="lightcell" rowspan="<%=size%>" style="display:none;"><%=ds.getString("YXSH") == null ? "&nbsp" : ds.getString("YXSH")%></td>
<script language="javascript">yxshArray[yxshCount++]='<%=ds.getString("YXSH") == null ? "&nbsp" : ds.getString("YXSH")%>';</script>
</tr><%
while(dds.next())
{
%> <tr><td class="lightcell" rowspan=1><%=dds.getString("MC") == null ? "&nbsp" : dds.getString("MC")%></td></tr><%
count++;
}
} %>
</table>

晕，我上面那个不就是jsp吗。

<param name=XMLData
value="<?xml version="1.0"?>
<?mso-application progid="Excel.Sheet"?>
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns:x="urn:schemas-microsoft-com:office:excel"
 xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
 xmlns:html="http://www.w3.org/TR/REC-html40">
<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
<Version>11.8122</Version>
</DocumentProperties>
<ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel">
<WindowHeight>9675</WindowHeight>
<WindowWidth>14940</WindowWidth>
<WindowTopX>240</WindowTopX>
<WindowTopY>105</WindowTopY>
<ProtectStructure>False</ProtectStructure>
<ProtectWindows>False</ProtectWindows>
</ExcelWorkbook>
<Styles>
<Style ss:ID="Default" ss:Name="Normal">
<Alignment ss:Vertical="Center"/>
<Borders/>
<Font ss:FontName="宋体" x:CharSet="134" ss:Size="12"/>
<Interior/>
<NumberFormat/>
<Protection/>
</Style>
</Styles>
<Worksheet ss:Name="TEST">
<Table ss:ExpandedColumnCount="7" ss:ExpandedRowCount="7" x:FullColumns="1"
x:FullRows="1" ss:DefaultColumnWidth="54" ss:DefaultRowHeight="14.25">
<Column ss:Width="31.5" ss:Span="4"/>
<Column ss:Index="6" ss:Width="36"/>
<Column ss:Width="27"/>
<Row>
<Cell ss:MergeAcross="5" ><Data ss:Type="String">TEST</Data></Cell>
</Row>
<Row>
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
</Row>
<Row>
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
</Row>
<Row>
<Cell ><Data ss:Type="String">字段1</Data></Cell>
<Cell ><Data ss:Type="String">字段2</Data></Cell>
<Cell ><Data ss:Type="String">本期</Data></Cell>
<Cell ><Data ss:Type="String">累计</Data></Cell>
<Cell ><Data ss:Type="String">指标</Data></Cell>
<Cell ><Data ss:Type="String">完成度</Data></Cell>
<Cell ><Data ss:Type="String">排名</Data></Cell>
</Row>
<Row>
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
<Cell ss:Formula="=IF(RC[-1]&lt;&gt;0,RC[-2]/RC[-1],0)"><Data
ss:Type="Number">0</Data></Cell>
<Cell />
</Row>
<Row>
<Cell />
<Cell />
<Cell />
<Cell />
<Cell />
<Cell ss:Formula="=IF(RC[-1]&lt;&gt;0,RC[-2]/RC[-1],0)"><Data
ss:Type="Number">0</Data></Cell>
<Cell />
</Row>
<Row>
<Cell ><Data ss:Type="String">合计</Data></Cell>
<Cell />
<Cell ss:Formula="=SUM(R[-2]C:R[-1]C)"><Data ss:Type="Number">0</Data></Cell>
<Cell ss:Formula="=SUM(R[-2]C:R[-1]C)"><Data ss:Type="Number">0</Data></Cell>
<Cell ss:Formula="=SUM(R[-2]C:R[-1]C)"><Data ss:Type="Number">0</Data></Cell>
<Cell ss:Formula="=IF(RC[-1]&lt;&gt;0,RC[-2]/RC[-1],0)"><Data
ss:Type="Number">0</Data></Cell>
<Cell />
</Row>
</Table>
<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
<Print>
<ValidPrinterInfo/>
<PaperSizeIndex>9</PaperSizeIndex>
<HorizontalResolution>600</HorizontalResolution>
<VerticalResolution>600</VerticalResolution>
</Print>
<ProtectObjects>False</ProtectObjects>
<ProtectScenarios>False</ProtectScenarios>
</WorksheetOptions>
</Worksheet>
</Workbook>
">

用Office 2003 Web Components做的，用来展现报表还是不错的，不过客户端最好装了office2003发不下, 分段了, 用上面的 <param name=XMLData value="....">替换本文中的 <param name=XMLData value=""><html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<title>Excel</title>
<script language="JavaScript">

</SCRIPT>
</head><body topmargin="0" leftmargin="0" scroll="no">
<object id="RepostSpreadsheet" height="100%" width="100%" codebase="/itnet/Templates/owc11.exe" classid="CLSID:0002E559-0000-0000-C000-000000000046">
<param name=DisplayTitleBar value=false>
<param name=DataType value=XMLData>
<param name=XMLData value="">
<p style='margin-top:100;font-family:宋体;font-size:8.0pt'>要交互式地使用此网页，您必须有
Microsoft® Internet Explorer 5.01 Service Pack 1 (SP2) 或更新版本，以及 Microsoft
Office 2003 Web Components。</p>
<p style='margin-top:100;font-family:宋体;font-size:8.0pt'>请访问 <a
href="http://r.office.microsoft.com/r/rlidmsowcpub?clid=2052&p1=Excel">Microsoft
Office 网站</a> 以获取更多信息。</p>
</object></body>
</html>

用Office 2003 Web Components你可以定义很复杂和展现的Excel报表, 然后用上面这个模板程序展现出来, 因为发布内容长度限制, 我的例子报表定义的很简陋。Excel模板制作的说明：
以上面的Excel为例，要注意的是一定要保留标题行和合计行中间的两个空数据行，如下5,6行
A |B |C |D |E |F |G
---------------------------------------------------
1|TEST
2|
3|
4|字段1 字段2 本期累计指标完成度排名
5| 公式
6| 公式
7|合计公式公式公式公式按上面制作Excel后，"文件-->另存为网页"，注意选择"添加交互"，保存页面后，用保存页面中的<param name=XMLData value="....">替换本文中的 <param name=XMLData value="">
就可以应用你的新Excel表了

调试易

关于用javascript 自动计算的问题

解决方案 »