亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js給table賦值的實(shí)例代碼

 更新時(shí)間:2016年10月13日 09:39:14   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇js給table賦值的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

要求:用js實(shí)現(xiàn)給一個(gè)table賦值如上:(定義X=70

【HTML】

<table class="table table-bordered">   
  <thead> 
    <tr> 
<th colspan="5" class="active">經(jīng)濟(jì)條件較好地區(qū)學(xué)費(fèi)表</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)濟(jì)條件較好地區(qū)學(xué)費(fèi)表</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)濟(jì)發(fā)達(dá)地區(qū)學(xué)費(fèi)表</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學(xué)年</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)+'學(xué)年</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ī)?lái)的js給table賦值的實(shí)例代碼全部?jī)?nèi)容了,希望大家多多支持腳本之家~

相關(guān)文章

  • 微信小程序圖片上傳功能的實(shí)現(xiàn)方法

    微信小程序圖片上傳功能的實(shí)現(xiàn)方法

    在編寫小程序的項(xiàng)目過(guò)程中,難免會(huì)有需要上傳圖片,下面這篇文章主要給大家介紹了關(guān)于微信小程序圖片上傳功能的實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • javascript?變量聲明?var,let,const?的區(qū)別

    javascript?變量聲明?var,let,const?的區(qū)別

    這篇文章主要介紹了javascript?變量聲明?var,let,const?的區(qū)別,變量聲明,每種編程語(yǔ)言必不可少的語(yǔ)法,在javascript中,變量的聲明相對(duì)其他語(yǔ)言來(lái)說(shuō),算是比較簡(jiǎn)單的。更多相關(guān)的具體內(nèi)容需要的小伙伴可以參考一下
    2022-06-06
  • 利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南

    利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南

    這篇文章主要給大家介紹了關(guān)于利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南的相關(guān)資料,適配最新微信小程序隱私協(xié)議開(kāi)發(fā)指南,兼容uniapp版本,需要的朋友可以參考下
    2023-12-12
  • JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的方法

    JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的方法

    這篇文章主要給大家介紹了關(guān)于JavaScript判斷對(duì)象、數(shù)組是否包含某個(gè)屬性、某個(gè)值的相關(guān)資料,我們?cè)趯?shí)際的開(kāi)發(fā)過(guò)程中,經(jīng)常需要判斷對(duì)象/數(shù)組是否包含某個(gè)屬性或者某個(gè)值,需要的朋友可以參考下
    2023-09-09
  • 微信小程序封裝多張圖片上傳api代碼實(shí)例

    微信小程序封裝多張圖片上傳api代碼實(shí)例

    這篇文章主要介紹了微信小程序封裝多張圖片上傳api代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-12-12
  • JavaScript中實(shí)現(xiàn)Map的示例代碼

    JavaScript中實(shí)現(xiàn)Map的示例代碼

    本篇文章給大家介紹javascript中實(shí)現(xiàn)map的示例代碼,代碼寫的簡(jiǎn)單易懂,可以獲取、刪除鍵值,剛興趣的朋友跟著腳本之家小編一起學(xué)習(xí)吧。
    2015-09-09
  • 關(guān)于JavaScript中的this指向問(wèn)題總結(jié)篇

    關(guān)于JavaScript中的this指向問(wèn)題總結(jié)篇

    在小編面試過(guò)程中經(jīng)常會(huì)遇到j(luò)avascript中this指向問(wèn)題,可以說(shuō)是前端面試必問(wèn),下面小編給大家總結(jié)了一下js中this的指向,感興趣的朋友一起學(xué)習(xí)吧
    2017-07-07
  • 百度地圖自定義控件分享

    百度地圖自定義控件分享

    本文給大家介紹的是如何使用百度地圖的自定義控件,附上示例,分享給大家,小伙伴們根據(jù)自己的需求稍微改動(dòng)下即可使用。
    2015-03-03
  • JavaScript獲取當(dāng)前url路徑過(guò)程解析

    JavaScript獲取當(dāng)前url路徑過(guò)程解析

    這篇文章主要介紹了JavaScript獲取當(dāng)前url路徑過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-12-12
  • js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果

    js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果

    這篇文章主要介紹了js實(shí)現(xiàn)卡片式項(xiàng)目管理界面UI設(shè)計(jì)效果,該UI設(shè)計(jì)中,將各個(gè)項(xiàng)目以卡片的方式堆疊排列在屏幕上,當(dāng)點(diǎn)擊了其中的某個(gè)項(xiàng)目的時(shí)候,該項(xiàng)目圖片會(huì)全屏放大,向下滾動(dòng)鼠標(biāo)可以看到該項(xiàng)目的介紹信息,需要的朋友可以參考下
    2015-12-12

最新評(píng)論