js给table赋值

本文介绍如何利用JavaScript来动态地为HTML表格赋值,例如设置表格的宽度为70,实现数据的动态渲染。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >



要求:用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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值