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 相关文章推荐
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
小偷PHP+Html+缓存
2006/11/25 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
node.js中的url.parse方法使用说明
2014/12/10 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python发送告警邮件脚本
2018/09/17 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python文字转语音实现过程解析
2019/11/12 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
大学自我鉴定范文
2013/12/26 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
公司离职证明标准格式
2014/11/18 职场文书
副总经理岗位职责
2015/02/02 职场文书
同事欢送会致辞
2015/07/31 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书