js给table赋值

最新推荐文章于 2022-04-13 10:36:40 发布

原创最新推荐文章于 2022-04-13 10:36:40 发布 · 1.4w 阅读

4 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用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>