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 相关文章推荐
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
JavaScript生成带有缩进的表格代码
Jun 15 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
ES6扩展运算符的用途实例详解
Aug 20 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
js实现弹窗效果
Aug 09 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
JS画线(实例代码)
2013/11/20 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
Django框架封装外部函数示例
2019/05/28 Python
pytorch 共享参数的示例
2019/08/17 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
weblogic面试题
2016/03/07 面试题
为什么UNION ALL比UNION快
2016/03/17 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
木工主管岗位职责
2013/12/08 职场文书
学风建设演讲稿
2014/09/12 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
体育运动会广播稿
2014/10/05 职场文书
国庆节新闻稿
2015/07/17 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Go语言怎么使用变长参数函数
2022/07/15 Golang