js給table賦值的實(shí)例代碼
要求:用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)容了,希望大家多多支持腳本之家~
- jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法
- js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例
- js中獲取 table節(jié)點(diǎn)各tr及td的內(nèi)容簡(jiǎn)單實(shí)例
- js實(shí)現(xiàn)對(duì)table的增加行和刪除行的操作方法
- js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例
- js將table的每個(gè)td的內(nèi)容自動(dòng)賦值給其title屬性的方法
- jsp中實(shí)現(xiàn)帶滾動(dòng)條的table表格實(shí)例代碼
- 微信小程序使用第三方庫(kù)Immutable.js實(shí)例詳解
- 利用js+css+html實(shí)現(xiàn)固定table的列頭不動(dòng)
相關(guān)文章
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ā)指南
這篇文章主要給大家介紹了關(guān)于利用uniapp+vue3+js適配微信隱私協(xié)議開(kāi)發(fā)指南的相關(guān)資料,適配最新微信小程序隱私協(xié)議開(kāi)發(fā)指南,兼容uniapp版本,需要的朋友可以參考下2023-12-12JavaScript判斷對(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-09JavaScript中實(shí)現(xiàn)Map的示例代碼
本篇文章給大家介紹javascript中實(shí)現(xiàn)map的示例代碼,代碼寫的簡(jiǎn)單易懂,可以獲取、刪除鍵值,剛興趣的朋友跟著腳本之家小編一起學(xué)習(xí)吧。2015-09-09關(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-07JavaScript獲取當(dāng)前url路徑過(guò)程解析
這篇文章主要介紹了JavaScript獲取當(dāng)前url路徑過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12js實(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