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插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 09 Javascript
原生JS实现飞机大战小游戏
Jun 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函数)
2006/10/09 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
详解tensorflow载入数据的三种方式
2018/04/24 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
小学新学期寄语
2014/04/02 职场文书
《长相思》听课反思
2014/04/10 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
医德考评自我评价
2014/09/14 职场文书
部队个人年终总结
2015/03/02 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS