js实现简单的打印表格


Posted in Javascript onJanuary 15, 2020

本文实例为大家分享了js实现打印表格的具体代码,供大家参考,具体内容如下

效果如下:

js实现简单的打印表格

代码如下:

<!DOCTYPE html>
<html lang="en">
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
使用JS动态显示文本
Sep 09 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
js实现图片实时时钟
Jan 15 #Javascript
js实现中文实时时钟
Jan 15 #Javascript
JS实现音量控制拖动
Jan 15 #Javascript
基于vue.js实现购物车
Jan 15 #Javascript
原生js+css调节音量滑块
Jan 15 #Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 #Javascript
JS函数进阶之继承用法实例分析
Jan 15 #Javascript
You might like
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
js Function类型
2011/12/04 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python运行异常管理解决方案
2020/03/09 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
迟到检讨书900字
2014/01/14 职场文书
空气环保标语
2014/06/12 职场文书
IT工程师岗位职责
2014/07/04 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
李强感恩观后感
2015/06/17 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
小学三年级作文之写景
2019/11/05 职场文书
导游词之青岛崂山
2019/12/27 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL