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 = &#39;&#39;; 
bei = item.content.bei; 
jia = item.content.jia; 
//加载第1行 
dom += &#39;<tr>&#39;; 
dom += &#39;<td>第1学年</td>&#39;; 
for(i=0;i<bei.length;i++){ 
  dom += &#39;<td>&#39;+ parseInt(x*bei[i]) +&#39;</td>&#39;; 
} 
dom += &#39;</tr>&#39;; 
//循环加载第2+行 
for(n=0;n<jia.length;n++){ 
  dom += &#39;<tr>&#39;; 
  dom += &#39;<td>第&#39;+(n+2)+&#39;学年</td>&#39;; 
  for(i=0;i<bei.length;i++){ 
    dom += &#39;<td>&#39;+ (parseInt(x*bei[i])+jia[n]) +&#39;</td>&#39;; 
  } 
  dom += &#39;</tr>&#39;; 
} 
$(&#39;[data-json="&#39;+item.name+&#39;"]&#39;).html(dom); 
    }) 
  
  }); 
}); 
    </script>

以上就是小編為大家帶來的js全部內容了，希望大家多多支援PHP中文網~

更多js給table賦值的實例代碼相關文章請關注PHP中文網~