Home  >  Article  >  Web Front-end  >  Example code of js assigning value to table

Example code of js assigning value to table

高洛峰
高洛峰Original
2016-12-29 16:29:001985browse

Example code of js assigning value to table

Requirements: Use js to assign a value to a table as above: (Definition 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>

The above is the entire content of the example code of js assignment to table brought by the editor. I hope you will support the PHP Chinese website~

For more related articles about js assignment code of table, please Follow PHP Chinese website!


##

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn