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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
actionscript与javascript的区别
May 25 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
vue语法自动转typescript(解放双手)
Sep 18 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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 表单提交给自己
2008/07/24 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
js获取变量
2006/08/24 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
Python中List.count()方法的使用教程
2015/05/20 Python
Python正则表达式使用经典实例
2016/06/21 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python ubplot使用方法解析
2020/01/10 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
电子商务专业个人的自我评价
2013/12/19 职场文书
理发店策划方案
2014/06/05 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
关于python类SortedList详解
2021/09/04 Python