JavaScript 是一种属于网络的脚本语言, 已经被广泛用于 web 应用开发, 常用来为网页添加各式各样的动态功能, 为用户提供更流畅美观的浏览效果. 通常 JavaScript 脚本是通过嵌入在 html 中来实现自身的功能的.
JavaScript 可以通过将表格输出到 HTML 网页中使用 innerHTML 实现打印表格.
JavaScript 实现打印表格:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 打印表格
- </title>
- </head>
- <body>
- <script>
- var data = [{
- id: 1001,
- icon: "img/1.png",
- name: "餐饮 0",
- num: 1,
- price: 10
- },
- {
- id: 1002,
- icon: "img/2.png",
- name: "餐饮 1",
- num: 1,
- price: 20
- },
- {
- id: 1003,
- icon: "img/3.png",
- name: "餐饮 2",
- num: 1,
- price: 30
- },
- {
- id: 1004,
- icon: "img/4.png",
- name: "餐饮 3",
- num: 1,
- price: 40
- },
- {
- id: 1005,
- icon: "img/5.png",
- name: "餐饮 4",
- num: 1,
- price: 50
- },
- {
- id: 1006,
- icon: "img/6.png",
- name: "餐饮 5",
- num: 1,
- price: 60
- },
- {
- id: 1007,
- icon: "img/7.png",
- name: "餐饮 6",
- num: 1,
- price: 70
- },
- {
- id: 1008,
- icon: "img/8.png",
- name: "餐饮 7",
- num: 1,
- price: 80
- },
- {
- id: 1009,
- icon: "img/9.png",
- name: "餐饮 8",
- num: 1,
- price: 90
- },
- {
- id: 1010,
- icon: "img/10.png",
- name: "餐饮 9",
- num: 1,
- price: 100
- }];
- var table = "<table border='1'cellspacing='0'>"; // 这个字符串第一位为# 颜色的格式
- for (var i = 0; i < 10; i++) {
- table += "<tr>";
- for (var key in data[i]) {
- table = table + "<td>" + data[i][key] + "</td>";
- }
- table += "</tr>";
- }
- table += "</table>";
- var bodys = document.getElementsByTagName('body')[0];
- bodys.innerHTML = table;
- </script>
- </body>
- </HTML>
实现效果:
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML.
语法:
tablerowObject.innerHTML=HTML
来源: http://www.css88.com/qa/javascript/11828.html