网页动态表格中数字的计算

最新推荐文章于 2020-04-10 21:17:24 发布
最新推荐文章于 2020-04-10 21:17:24 发布
阅读量1.6k 收藏
点赞数
分类专栏： 软件开发 文章标签： class input function table button c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hiyu2218/article/details/1757728
版权

*************************************************************************************************************************************************************************************
                                   
                        网页动态表格中数字的计算

**************************************************************************************************************************************************************************************

以下是相关代码，把下面文件放在同一目录下运行即可：

//文件 countNum.html 代码如下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. </head>
  7. <SCRIPT LANGUAGE="javascript" SRC="addDelTable.js"></SCRIPT>
  8. <SCRIPT>
  9. allCount=1;
  10. countA=1;
  11. countB=1;
  12. countC=1;
  13. countD=1;
  14. </SCRIPT> 
  15. <body>
  16. <form method=post name=ecform> 
  17. <table width="65%" border="0" align="center" cellpadding="0" cellspacing="1" class="form_table">
  18.    <TR>
  19.     <TH width="17%"> 成绩表</TH>
  20.     <TH width="26%" class="form_label">姓名</TH>
  21.     <TH width="26%" class="form_label">数学</TH>
  22.     <TH width="26%">英语</TH>
  23.     <TH width="5%"></TH>
  24.    </TR>
  25.    <tr>
  26.     <td colspan="5"><table border="0"  cellpadding="0" cellspacing="0" width="100%" align="center" class="form_table" id="commandTable"> 
  27.      <tr id=cT>
  28.        <TD class="form_label" width="17%"><strong> </strong></TD>
  29.        <TD class=form_content width="26%"><input type="text" id="cMa" class="longfield" name="loginName" /> </TD>
  30.        <TD class=form_content width="26%"><input type="text" id="cMb" class="longfield" name="loginName"/> </TD>
  31.        <TD class=form_content width="26%"><input type="text"id="cMc"  class="longfield" name="loginName"/></TD>
  32.        <td class="form_label" width="5%"><input type="button" value="+" alt="add"  onClick="newHospitalVisit('commandTable')"></td>
  33.      </tr>
  34.     </table></td>    
  35.    </tr> 
  36.    <tr>
  37.        <TD  class=form_content colspan="2"><input type="button" value="       合   计     "  onClick="count('commandTable')"/></TD>
  38.        <TD  class=form_content><input type="text" id=tMb class="longfield" name="loginName" /> </TD>
  39.        <TD class=form_content><input type="text" id=tMc class="longfield" name="loginName" /></TD>
  40.        <td class="form_label"></td> 
  41.    </tr> 
  42. </table>
  43. </form>
  44. </body>
  45. </html>

//文件 addDelTable.js 代码如下

  1. var modified=0 
  2. var currentLine=-1 
  3. var line=-1 
  5. function delIt(tableID) {
  6.  var PLList=document.getElementById(tableID);
  7.  line=parseInt(event.srcElement.ln,10)
  8.   if (line>0){ 
  9.    for (i=1;i<PLList.rows.length;i++){ 
  10.      if (cT[i].ln==line){ 
  11.         PLList.deleteRow(i) 
  12.      }
  13.    }
  14.   }
  15. } 
  17. function newHospitalVisit(tableID) 
  18. { 
  19. var PLList=document.getElementById(tableID);
  20. newRow=PLList.insertRow(PLList.rows.length);
  21. var medicationA="";
  22. var medicationB="";
  23. var medicationC="";
  25.  newRow.id="cT";
  26.  medicationA="cMa";
  27.  medicationB="cMb";
  28.  medicationC="cMc";
  29.  allCount=countA;
  30.  countA++;
  32. //alert(newRow.id);
  33. //newRow.id="tdt"; 
  34. newRow.ln=allCount; 
  35. newRow.bgColor=""; 
  36. newRow.className="form_content"; 
  37. //newRow.οnclick=lightOn; 
  39. c1=newRow.insertCell(0); 
  40. c1.ln=allCount; 
  41. c1.className="form_label"; 
  42. //c1.οnclick=delIt(); 
  43. //c1.οnmοuseοver=mouseOver; 
  44. //c1.οnmοuseοut=mouseOut; 
  45. c1.innerHTML=""; 
  46. c2=newRow.insertCell(1); 
  47. c2.ln=allCount; 
  48. c2.className="form_content"; 
  49. c2.innerHTML="<input type=text class=longfield  id="+medicationA+" ln="+allCount+" class=tableData οnkeyup='modifiedIt()'>" ;
  50. c3=newRow.insertCell(2); 
  51. c3.ln=allCount;
  52. c3.className="form_content"; 
  53. c3.innerHTML="<input type=text class=longfield id="+medicationB+" ln="+allCount+" class=tableData οnkeyup='modifiedIt()'>" ;
  54. c4=newRow.insertCell(3); 
  55. c4.ln=allCount; 
  56. c4.className="form_content"; 
  57. c4.innerHTML="<input type=text class=longfield  id="+medicationC+" ln="+allCount+" class=tableData οnkeyup='modifiedIt()'>"
  58. c5=newRow.insertCell(4); 
  59. c5.ln=allCount; 
  60. c5.className="form_label"; 
  61. c5.id="delItem"; 
  62. c5.innerHTML="<input type=button value=- alt=add width=18 height=10 ln="+allCount+" onClick=delIt('"+tableID+"')>" ;
  63. allCount++ 
  64. }
  65. function mouseOver() 
  66. { 
  67. event.srcElement.className="delMouseOver" 
  68. } 
  69. function mouseOut() 
  70. { 
  71. event.srcElement.className="scheduleButtonVisible" 
  72. }
  73. function count(tableID) 
  74. { 
  75.   var PLList=document.getElementById(tableID);
  76.   var sb=0.0;
  77.   var sc=0.0;
  78.   var strb="";
  79.   var strc="";
  80.   for (i=0;i<PLList.rows.length;i++){
  81.      if(PLList.rows.length==1){
  82.         strb=document.ecform.cMb.value;
  83.         strc=document.ecform.cMc.value;
  84.      }else{
  85.         strb=document.ecform.cMb[i].value;
  86.         strc=document.ecform.cMc[i].value;
  87.      }
  88.      if(strb=='')strb='0';
  89.      if(strc=='')strc='0';
  90.      if((/d+/).test(strb)){
  91.         confirm("成绩必须为数字");
  92.         return; 
  93.      }else{
  94.       sb=sb+parseFloat(strb);
  95.       sc=sc+parseFloat(strc);
  96.      }
  97.   } 
  98.   document.ecform.tMb.value=sb;
  99.   document.ecform.tMc.value=sc;
  100. }

 

 

如发现有问题请与本人联系：
  MSN：hiyu2218@hotmail.com
  QQ：147204701
  Email：hiyu2218@yahoo.com.cn

 
hiyu2218
关注
专栏目录
网页数字计算器新方法(带说明).rar
02-20
网页数字计算器 新方法 (带说明).rar
html表格数据按公式自动计算,电子表格如何自动计算
weixin_29691667的博客
06-03 429
在使用Excel统计数据时，有时会用条件格式等方法把一些符合特定条件的单元格标记成某种颜色。例如把成绩表中分数在60分以上的单元格用颜色标记出来，但标记颜色后有时可能还需要对已标记颜色单元格的数量进行统计，从而知道究竟有多少个人达到了标准。我们可以利用Excel的一些功能让Excel自动计算出已标记颜色的单元格数量。下面以Excel2007为例，介绍两种个人认为相对简单的方法，供大家参考。例如要统...
简易版网页计算器
笑语轻柔
09-11 1632
需求： 通过用鼠标点击数字按钮和运算符按钮，实现现实中计算器的功能，能够做加减乘除及取余运算。并能够清零和取消上一次错误输入。 1、简单界面的实现：            首先建一个表单，在表单里插入一个表格。此界面的实现可以通过代码框中通过用表单与表格各标签功能实现，也可以在设计框中通过插入的方式实现。 2、鼠标点击数字键在窗口中相应数字显现的实现：          在每一
html数值计算计算
记事本
05-17 6097
这几天我编写了购物车，在数值计算上面出现了一些问题 第一个问题： 从后台传递过来的数值类型是double类型的数值，小数点后面出现了10位以上。例如 1476.6000000006 第二个问题： 从后台传递过来的数值，变成了科学计数法，java的double类型的数值存储的时候是科学计数法。    例如4.78732E5 第三个问题： 计算出来大于1000的数值，会出现西方的
实现表格自动计算
weixin_34410662的博客
03-03 579
先来看看实时操作动画演示： 每一行进行小计，数量 X 单价。而总计则是把表格中小计列所有行进行相加。 Html code: &lt;table id="Order"&gt; &lt;tr&gt; &lt;th&gt;费用名目&lt;/th&gt; &lt;th&gt;数量&lt;/th&gt; &lt;th&
HTML制作电子发票收据凭证界面,并可填写数字中文数字,自动计算合计等功能.zip
01-06
在这个"HTML制作电子发票收据凭证界面,并可填写数字中文数字,自动计算合计等功能.zip"的项目中，我们看到了HTML技术被巧妙地应用于构建一个实用的电子发票系统。这个系统允许用户在网页上直接填写发票或收据的详细...
计算机视觉艺术在数字媒体中的应用 (1).pdf
09-28
其次，计算机视觉艺术可以增强信息传达的效率和吸引力，如动态图表、可视化数据等，使复杂的信息变得更加易于理解和记忆。此外，它还能推动新媒体艺术的发展，如交互艺术、数字雕塑等，让艺术与观众的互动变得更加...
_计算机网页设计中图像处理技术的应用分析.pdf
09-15
5. 加强互动性：在动态网页设计中，图像处理技术可用于创建动画、交互式元素等，增加用户参与度，使网页更具吸引力和功能性。 总之，图像处理技术在网页设计中的应用不仅提升了网页的美学价值，还极大地优化了信息...
Python基于pandas爬取网页表格数据
12-17
- `thousands`: 分隔符，用于识别数字中的千位分隔符。 - `encoding`: 文件编码，用于读取或写入时的字符编码。 - `converters`: 自定义函数，用于特定列的数据转换。 - `na_values`: 指定哪些值被视为缺失值。 - `...
电子表格软件-计算机文化基础.ppt
最新发布
11-12
电子表格软件是一种用于管理和分析数据的强大工具，它可以创建、编辑和计算复杂的数学公式，进行数据分析和预测，并能制作各种图表，Excel 2000甚至支持制作网页。 启动和退出Excel可以通过多种方式，包括从"开始...
jQuery购物车自动计算金额表单
06-01
NULL 博文链接：https://zhitangrui2010.iteye.com/blog/2219537
页面生成带有合计的表格
yumuxixi的博客
04-14 2632
要做的效果如下图所示： 做法是先在数据库里把金额合计算好，需要合并的行数也算好，然后放在页面上。因为公司是直接在jsp页面写java脚本的框架模式，所以大家参考修改一下即可。 //这里的ListStyle是公司框架有的，不必理会。                                     报销申请人     报销单条形码编号  
网页设计用表格设计一个计算器界面 用于小白入门 安排
weixin_45437892的博客
04-10 3523
网页设计用表格设计计算器界面 用于小白入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ padding: 0;margin: ...
layui表格输入数值自动计算
flame的博客
07-29 7878
开发工具与关键技术：VS2015，ASP.NET MVC 撰写时间：2019年 7 月 27 日 先开启layui表格的单元格编辑 在想要开启单元格的列中输入edit:’text’，即可开启单元格编辑 通过监听单元格事件直接获取整行的数据 比如下面的图片中数量就是开启了单元格编辑 在数量单元格中输入数字 在单元格失去焦点的时候就获取一整行的数据 再把需要的值取出来进行计算 再把计算好的值赋...
jquery手写table行列自动计算（自动计算小计和合计）
热门推荐
qq_16063177的博客
01-05 1万+
第一次接触这种要涉及行列计算的东西，苦死冥想了一天，也没想出来，上百度搜了搜也没有自己想要的，在17点左右，结果就这样10分钟之内就忽然想出来了，好高兴的！！！ 首先，我做的这个功能是大表里面有一个小表，小表可以添加一行，删除其中某行。如下图： 输入数据前： 输入数据后： 可见我在伙食补助里面输入了一个2.25，自动生成了小计2.25和总计2.25元。 我再多输入点数据。
element el-table 计算指定列
学习记录
07-12 8841
官网说明：将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组， <el-table :data="distributi...
HTML与JSP动态网页设计中的Math对象详解
理解并熟练运用HTML和JSP中的math对象，可以帮助开发者创建功能丰富的、具有动态特性的网页，同时能够实现复杂的数学计算，提升用户体验。在网页设计过程中，结合CSS和JavaScript，可以进一步美化页面样式并增加交互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值