Home > Web Front-end > JS Tutorial > body text

Example code of js assigning value to table

高洛峰
Release: 2016-12-29 16:29:00
Original
2024 people have browsed it

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>
Copy after login

[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>
Copy after login

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!


##

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template