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操作select大全
Apr 25 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
vue实现购物车结算功能
Jun 18 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
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
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
vue内置指令详解
2018/04/03 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
决定成败的关键——创业计划书
2014/01/24 职场文书
学校安全责任书
2014/04/14 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
Python机器学习之基础概述
2021/05/19 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang