这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 js 给 table 赋值的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
要求:用 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>
来源: http://www.phperz.com/article/17/0708/331223.html