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 相关文章推荐
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
react PropTypes校验传递的值操作示例
Apr 28 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+Html+缓存
2006/11/25 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php报错502badgateway解决方法
2019/10/11 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
ajax异步请求详解
2017/01/06 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python 转换文本编码实现解析
2019/08/27 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
社保委托书怎么写
2014/08/02 职场文书
2014年度党员自我评议
2014/09/13 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2014年党建工作总结
2014/11/11 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
法定代表人身份证明书
2015/06/18 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers