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赋值的实例代码全部内容了,希望大家多多支持我们~

时间: 2016-10-11

js实现html table 行,列锁定的简单实例

js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

js中获取 table节点各tr及td的内容简单实例

<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td>

js实现table添加行tr、删除行tr、清空行tr的简单实例

如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"

jQuery+json实现动态创建复杂表格table的方法

本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+

jsp中实现带滚动条的table表格实例代码

如下所示: <div style="width:700px; height:225px; overflow:auto;"> <table border="1" width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="3%">0</td> <td width

利用js+css+html实现固定table的列头不动

话不多说,跟这小编来一起看下吧 1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2.Javascript <script type="text/javascript"> //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = funct

js将table的每个td的内容自动赋值给其title属性的方法

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>将table的每个td的内容自

js实现对table的增加行和删除行的操作方法

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

微信小程序使用第三方库Immutable.js实例详解

前言 Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表.immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector. 微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用. 原因分析 Immutable使用了UMD模块化规范 (f

微信小程序使用第三方库Underscore.js步骤详解

前言 Underscore.js是一个很精干的库,压缩后只有4KB.Underscore 提供了100多个函数,包括常用的:map.filter.invoke - 当然还有更多专业的辅助函数,如:函数绑定.JavaScript 模板功能.创建快速索引.强类型相等测试等等.弥补了标准库的不足,大大方便了JavaScript的编程. 微信小程序无法直接使用require( 'underscore.js' )进行调用. 微信小程序模块化机制 微信小程序运行环境支持CommoJS模块化,通过module

微信小程序 利用css实现遮罩效果实例详解

微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

微信小程序图片自适应支持多图实例详解

微信小程序图片自适应支持多图实例详解 微信小程序图片自适应,是一个比较常见的需求,平时我们在WEBView中,只需要设置max-width:100%.在微信里面虽然widthFix也能实现,但有一个缺陷就是图片的宽度值要大于或者等于设定的值,否则就会发生拉伸变形,本文通过另外一种来适应. 首先我们来看看图片组件给的一些说明: 属性名 类型 默认值 说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪.缩放的模式 binderror HandleE

微信小程序 开发MAP(地图)实例详解

微信小程序 开发MAP(地图)实例详解 在创建MAP(地图)前,请各位小伙伴们认真的去了解微信小程序开发的说明. https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html#map 了解完MAP(地图)里的属性之后,接下来我们就来创建一个简单的MAP(地图)控件. 第一步:肯定是创建项目.起项目名.项目地址 PS:我这里以index的文件为名 第二步:我们来写 index.wxml 文件的代码 WXML文件代码: <map id=&quo

微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content"> <!-- 头像 --> <view class="author-date"> &

微信小程序之绑定点击事件实例详解

微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo

微信小程序之网络请求简单封装实例详解

微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request

微信小程序wx.previewImage预览图片实例详解

一.小知识 二.例子 1.wxml <span style="font-family:Comic Sans MS;font-size:18px;color:#333333;"><view class="container"> <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <im

微信小程序移动拖拽视图-movable-view实例详解

JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT