javascript eval函数的应用，循环合并表格内容

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量713 收藏
点赞数
分类专栏： Javascript 文章标签： javascript input fp date button border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cfanseal/article/details/2911162
版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>eval函数的应用，循环合并表格内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<script language="JavaScript" type="text/javascript">

function calprice() {
var sss="";
 for(i = 0; i < 10 ; i++) {
  var str="";
  var strr = eval(document.getElementById('Date'+i)).innerHTML+": ";
   for(n = 0; n < 3; n++) {
    if(eval("document.form.num"+i)[n].value != "") {
     alert("num"+i+"["+n+"]"+eval("document.form.num"+i)[n].value);//测试
     
     switch(n) {
     case 0:
      str += "[ A+ ][ " + eval("document.form.num"+i)[n].value + " ]"
        +"Price[ " + eval(document.getElementById('prAp'+i)).innerHTML + " ], ";
      break;
     case 1:
      str += "[ A ][ " + eval("document.form.num"+i)[n].value + " ]"
        +"Price[ " + eval(document.getElementById('prA'+i)).innerHTML + " ], ";
      break;
     case 2:
      str += "[ B ][ " + eval("document.form.num"+i)[n].value + " ]"
        +"Price[ " + eval(document.getElementById('prB'+i)).innerHTML + " ], ";
      break;
     } 
    }
   }
  if(str!="") {
   strr += str;
   strr = strr.substring(0,strr.lastIndexOf(','))+".";
   sss+=strr+"/n";
  }
 }
 sss = sss.substring(0,sss.lastIndexOf('/n'));
 if(sss!="") {
  alert(sss);
 }
}
</script>

<body>
 <form name="form" id="fp" action="account"
                  <table width="660" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#E3E3E3">
                    <tr>
                      <td rowspan="2" align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>行数</strong></font></td>
                      <td colspan="6" align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>数值</strong></font></td>
                    </tr>
                    <tr>
                      <td align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>类型A+</strong></font></td>
                      <td align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>数量</strong></font></td>
                      <td align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>类型A</strong></font></td>
                      <td align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>数量</strong></font></td>
                      <td align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>类型B</strong></font></td>
                      <td align="center" bgcolor="#C80000"><font color="#FFFFFF"><strong>数量</strong></font></td>
                    </tr>
                    <tr>
                      <td align="left" bgcolor="#F0F0F0" id="Date0">第一行</td>
                      <td align="center" bgcolor="#F0F0F0" id="prAp0">00</td>
                      <td align="center" bgcolor="#F0F0F0"><input name="num0" id="fp_inum00" type="text" size="5" alt="_int_"></td>
                      <td align="center" bgcolor="#F0F0F0" id="prA0">01</td>
                      <td align="center" bgcolor="#F0F0F0"><input name="num0" id="fp_inum01" type="text" size="5" alt="_int_"></td>
                      <td align="center" bgcolor="#F0F0F0" id="prB0">02</td>
                      <td align="center" bgcolor="#F0F0F0"><input name="num0" id="fp_inum02" type="text" size="5" alt="_int_"></td>
                    </tr>
                    <TR>
                      <TD align="left" bgcolor="#E3E3E3" id="Date1" >第二行</TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prAp1">10</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num1" id="fp_inum10" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prA1">11</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num1" id="fp_inum11" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prB1">12</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num1" id="fp_inum12" type="text" size="5" alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#F0F0F0" id="Date2" >第三行</TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prAp2">20</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num2" id="fp_inum20" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prA2">21</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num2" id="fp_inum21" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prB2">22</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num2" id="fp_inum22" type="text" size="5" alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#E3E3E3" id="Date3" >第四行</TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prAp3">30</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num3" id="fp_inum30" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prA3">31</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num3" id="fp_inum31" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prB3">32</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num3" id="fp_inum32" type="text" size="5" alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#F0F0F0" id="Date4" >第五行</TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prAp4">40</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num4" id="fp_inum40" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prA4">41</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num4" id="fp_inum41" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prB4">42</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num4" id="fp_inum42" type="text" size="5" alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#E3E3E3" id="Date5" >第六行</TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prAp5">50</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num5" id="fp_inum50" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prA5">51</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num5" id="fp_inum51" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prB5">52</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num5" id="fp_inum52" type="text" size="5" alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#F0F0F0" id="Date6" >第七行</TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prAp6">60</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num6" id="fp_inum60" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prA6">61</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num6" id="fp_inum61" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prB6">62</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num6" id="fp_inum62" type="text" size="5" alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#E3E3E3" id="Date7" >第八行</TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prAp7">70</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num7" id="fp_inum70" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prA7">71</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num7" id="fp_inum71" type="text" size="5" alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prB7">72</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num7" id="fp_inum72" type="text" size="5" alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#F0F0F0" id="Date8" >第九行 </TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prAp8">80</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num8" id="fp_inum80" type="text" size="5"  alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prA8">81</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num8" id="fp_inum81" type="text" size="5"  alt="_int_"></TD>
                      <TD align="center" bgcolor="#F0F0F0" id="prB8">82</TD>
                      <TD align="center" bgcolor="#F0F0F0"><input name="num8" id="fp_inum82" type="text" size="5"  alt="_int_"></TD>
                    </TR>
                    <TR>
                      <TD align="left" bgcolor="#E3E3E3" id="Date9" >第十行 </TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prAp9">90</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num9" id="fp_inum90" type="text" size="5"  alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prA9">91</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num9" id="fp_inum91" type="text" size="5"  alt="_int_"></TD>
                      <TD align="center" bgcolor="#E3E3E3" id="prB9">92</TD>
                      <TD align="center" bgcolor="#E3E3E3"><input name="num9" id="fp_inum92" type="text" size="5"  alt="_int_"></TD>
                    </TR>
          
            </table>
        </form>
            <input type="button" value="test" οnclick="calprice();" >
             
</body>
</html>

cfanseal
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js动态合并单元格(指定的列或之间列)
lvliqiang2012的专栏
07-02 2552
window.onload = function(){     var tab = document.getElementById("tab");//tab为你的table的id     var maxCol = 3, val, count, start;  //maxCol：合并单元格作用到多少列         for(var col = maxCol-1; col >= 0 ;
js中eval方法的使用
wangxiaolong的博客
12-17 381
2.js中eval方法的使用 eval可以执行传入的字符串，比如:eval(“console.log(‘eval test!’)”)，控制台直接会输出"eval test!"，同理，可以执行其他的函数，如:eval(“test()”)，则会执行test()函数。 ...
eval函数-循环定义n个变量
Annie的博客
01-07 1317
    eval()可以计算某个字符串，并执行其中的js代码。实际使用中，用到的场景并不多，但是了解一下这个强大的函数，说不定，在遇到疑难杂症的时候就派上用场了。     eval(string); //string是必需参数，含有要计算的js表达式或需要执行的语句     我的疑难杂症就是，要定义个数不确定的n个变量。     首先，通过循环遍历出定义变量的语句，再通过eval执行这些语...
原生table纯js动态遍历生成数据，纯js合并表格
钱多多的博客
12-15 1038
原生table纯js动态遍历生成数据，纯js合并表格1. 表格数据根据变量动态生成。3. 最后一行为总的合并一整行。2. 指定列进行合并。
原生js合并单元格
dlbyysd的博客
07-12 2001
原生js简单封装合并单元格
Table内容后台循环输出时用js合并单元格
ch18988003939的博客
12-26 7225
首先来回顾一下table最基础的合并单元格方法（以下内容来源于网上资源的整理） table合并思想：当将多个内容合并时，就会有多余的东西需要删除，例如：有三列3个td，当合并时就需要删除2个。合并单元格，就是删除多余td。 推出一个合并删除td的公式：删除的个数=合并的个数-1 合并列用：colspan="列数" 合并行用：rowspan="行数" 1、基本表格
js自动合并单元格
随风而逝的博客
04-28 771
在做前端的时候，有时候涉及到了要合并单元的操作，这个就可以用了。function autoRowSpan(tb, row, col1, col2) { var trs=document.getElementById("content").getElementsByTagName("tr"); var length=0; if(!baseServiceMoney){ length=trs.leng...
使用js多级次合并单元格
galeno的博客
06-27 2911
表格相同内容合并 合并前： c1 c2 c3 c4 c5 c6 a 1 2 3 4 5 a 1 3 4
前端笔记：JS动态合并单元格
影子的博客
02-12 1691
/** 动态合并单元格 tableId:表格ID colLength：循环检查前多少列单元格 */ function uniteTable(tableId, colLength) {//表格ID，表格列数 var tb=document.getElementById(tableId); tb.style.display=''; var i ...
js中动态合并单元格
m0_37833227的博客
12-04 770
前端页面 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;巡检结果报表&lt;/title&gt; &lt;#include "/common.html"&gt;
js中eval()函数详解
热门推荐
weixin_52125363的博客
10-26 2万+
文章目录eval()函数一、eval()基础用法二、eval()通过调用函数名调用函数三、eval()调用需要传参的函数四、eval()函数的其他用法1、eval(解析代码体)2、将作用域传入eval()中也是可以识别的总结 eval()函数 定义：eval()函数是一种接受字符串作为参数，并且可以将接受的字符串转换成js表达式并且立即执行该表达式。 eval()函数的参数只有一个就是字符串。 eval(str) 例如：eval(‘console.log(112233)’) 他就可以将console.lo
利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
杨明金的博客
11-12 2999
查看本章节 查看作业目录 需求说明： 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变 当用户单击“+”按钮时，文本框中的商品数量增加 1，单项价格和总价相应地增加 点击“-”按钮，文本框中的数量减 1（不能小于 1），单项价格和总价相应地减少 实现思路： 声明 calPrice() 函数，根据商品的单价和数量计算单项价格，当点击改变数量的按钮时，调用 calPrice() 函数，及时刷新单项价格 声明 calT
js中Eval用法
zhangchangguo的专栏
12-25 1031
http://www.w3.org/1999/xhtml" >    无标题页        .tabletype    {     background-color:Blue;     }            function aa()    {     for(var i=1;i     {      eval("document.getElementById(a"+i+").style
实现客户端表单自动验证
05-19 861
实现客户端表单自动验证。只需在表单域添加验证条件即可轻松实现表单验证。formvalidator.js------------------------------------------------------function checkInput(theForm){ if(!theForm.nodeName)  theForm = document.getElementById(theFor
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 661
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 304
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 242
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
JavaScript函数详解与应用
"JavaScript函数大全包含了JavaScript中众多常用的函数用法，这些函数涵盖了数学运算、字符串操作、数组处理、日期时间处理等多个方面，是开发者日常编程的实用工具。" JavaScript函数大全提供了各种功能的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值