js给table赋值的实例代码


Posted in Javascript onOctober 13, 2016

js给table赋值的实例代码

要求:用js实现给一个table赋值如上:(定义X=70

【HTML】

<table class="table table-bordered">   
  <thead> 
    <tr> 
<th colspan="5" class="active">经济条件较好地区学费表</th> 
    </tr> 
    <tr> 
<th></th> 
<th>4-8人班</th> 
<th>2-3人班</th> 
<th>1人班</th> 
<th>10人以上</th> 
    </tr> 
  </thead> 
  <tbody data-json="area1"></tbody> 
</table> 
 
 
<table class="table table-bordered">   
  <thead> 
    <tr> 
<th colspan="5" class="active">经济条件较好地区学费表</th> 
    </tr> 
    <tr> 
<th></th> 
<th>4-8人班</th> 
<th>2-3人班</th> 
<th>1人班</th> 
<th>10人以上</th> 
    </tr> 
  </thead> 
  <tbody data-json="area2"></tbody> 
</table> 
 
<table class="table table-bordered">   
  <thead> 
    <tr> 
<th colspan="5" class="active">经济发达地区学费表</th> 
    </tr> 
    <tr> 
<th></th> 
<th>4-8人班</th> 
<th>2-3人班</th> 
<th>1人班</th> 
<th>10人以上</th> 
    </tr> 
  </thead> 
  <tbody data-json="area3"></tbody> 
</table>

【JS】

<script> 
require(["jquery"], function($) { 
    var x=70; 
    var data = [ 
{name:"area1",content:{bei:[1,1.2,1.5,0.8],jia:[20,30,40,50]}}, 
{name:"area2",content:{bei:[1,1.2,1.5,0.8],jia:[20,30,50,60]}}, 
{name:"area3",content:{bei:[1,1.2,1.5,0.8],jia:[20,40,60,80]}} 
    ]; 
     
    $(data).each(function (i,item){ 
dom = ''; 
bei = item.content.bei; 
jia = item.content.jia; 
//加载第1行 
dom += '<tr>'; 
dom += '<td>第1学年</td>'; 
for(i=0;i<bei.length;i++){ 
  dom += '<td>'+ parseInt(x*bei[i]) +'</td>'; 
} 
dom += '</tr>'; 
//循环加载第2+行 
for(n=0;n<jia.length;n++){ 
  dom += '<tr>'; 
  dom += '<td>第'+(n+2)+'学年</td>'; 
  for(i=0;i<bei.length;i++){ 
    dom += '<td>'+ (parseInt(x*bei[i])+jia[n]) +'</td>'; 
  } 
  dom += '</tr>'; 
} 
$('[data-json="'+item.name+'"]').html(dom); 
    }) 
 
  }); 
}); 
    </script>

以上就是小编为大家带来的js给table赋值的实例代码全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 #Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 #Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 #Javascript
Node.js中常规的文件操作总结
Oct 13 #Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 #Javascript
js图片切换具体实现代码
Oct 13 #Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 #Javascript
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
php源码的使用方法讲解
2019/09/26 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
node.js +mongdb实现登录功能
2020/06/18 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
浅谈Python的文件类型
2016/05/30 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
业务部主管岗位职责
2014/01/29 职场文书
亮化工程实施方案
2014/03/17 职场文书
酒店开业策划方案
2014/06/02 职场文书
学生检讨书范文
2014/10/30 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python