js给table赋值的实例代码

2024-10-24 17:49:34

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

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"
微信小程序使用第三方库Immutable.js实例详解

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

要求:用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人班&
vue.js自定义组件directives的实例代码

自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行
JS获取当前时间的实例代码(昨天、今天、明天)

1.时间格式化 //昨天的时间 var day1 = new Date(); day1.setTime(day1.getTime()-24*60*60*1000); var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate(); //今天的时间 var day2 = new Date(); day2.setTime(day2.getTime()); var s2 = day2
JS控制下拉列表左右选择实例代码

使用JS控制下拉列表左右选择需求分析在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品技术分析 ondblclick="selectOne()":双击事件 select标签的属性multiple="multiple": 代码实现 <!DOCTYPE html> <html> <head> <meta charset=&
原生JS实现的放大镜效果实例代码

这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
Vue.js实现输入框绑定的实例代码

实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=
Angular.js 实现数字转换汉字实例代码

AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示: // 1.实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环:提示:ng-change指令 <div ng-app="my
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)

js判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie
BootStrap fileinput.js文件上传组件实例代码

1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript
用js实现简单算法的实例代码

一.冒泡排序 var arr1=[3,9,2,7,0,8,4]; for(var i=0;i<arr1.length;i++){ for(var j=i+1;j<arr1.length;j++){ var temp=0; if(arr1[i]>arr1[j]){ temp=arr1[i]; arr1[i]=arr1[j]; arr1[j]=temp; } } } alert(arr1); 二.快速排序 var a=[3,5,0,9,2,7,5]; function quickSort(a

js给table赋值的实例代码

相关推荐

随机推荐