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 相关文章推荐
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
微信小程序实现聊天室
Aug 21 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
AJAX的使用方法详解
2017/04/29 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
python实现web方式logview的方法
2015/08/10 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
对python中return与yield的区别详解
2020/03/12 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
初中生物教学反思
2014/01/10 职场文书
《荷花》教学反思
2014/04/16 职场文书
人事局接收函
2015/01/30 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL