您的当前位置:首页正文

js给table赋值的实例代码

2020-11-27 来源:客趣旅游网
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>
显示全文