js给table赋值

来源：互联网发布：2016淘宝详情页尺寸编辑：程序博客网时间：2024/06/04 19:31

要求：用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 = '';                        bei = item.content.bei;                        jia = item.content.jia;                        //加载第1行                        dom += '<tr>';                        dom += '<td>第1学年</td>';                        for(i=0;i<bei.length;i++){                            dom += '<td>'+  parseInt(x*bei[i]) +'</td>';                        }                        dom += '</tr>';                        //循环加载第2+行                        for(n=0;n<jia.length;n++){                                                    dom += '<tr>';                            dom += '<td>第'+(n+2)+'学年</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>

0 0