js給table賦值的實例代碼

更新時間：2016年10月13日 09:39:14 投稿：jingxian

下面小編就為大家?guī)硪黄猨s給table賦值的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

要求：用js實現(xiàn)給一個table賦值如上：（定義X=70

【HTML】

<table class="table table-bordered">   
  <thead> 
    <tr> 
<th colspan="5" class="active">經(jīng)濟條件較好地區(qū)學費表</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">經(jīng)濟條件較好地區(qū)學費表</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">經(jīng)濟發(fā)達地區(qū)學費表</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>'; 
//循環(huán)加載第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>

以上就是小編為大家?guī)淼膉s給table賦值的實例代碼全部內(nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章:

相關(guān)文章

javascript中l(wèi)ocalStorage本地存儲(新增、刪除、修改)使用詳細教程
本地存儲localstorage是一種在瀏覽器中存儲數(shù)據(jù)的方式,可以將數(shù)據(jù)保存在用戶的本地計算機上,以便在下一次訪問網(wǎng)站時使用,下面這篇文章主要給大家介紹了關(guān)于javascript中l(wèi)ocalStorage本地存儲(新增、刪除、修改)使用詳細教程,需要的朋友可以參考下
2023-05-05
JavaScript數(shù)組去重的幾種方法
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的幾種方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
這篇文章主要介紹了微信小程序中子頁面向父頁面?zhèn)髦祵嵗斀獾南嚓P(guān)資料,需要的朋友可以參考下
2017-03-03