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 相关文章推荐
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 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
新52大事件
2020/03/03 欧美动漫
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python爬取网易云音乐评论
2018/11/16 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
支部组织生活会方案
2014/06/10 职场文书
法定授权委托证明书
2014/09/27 职场文书
人民调解协议书范本
2014/10/11 职场文书
酒店辞职书范文
2015/02/26 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
大国崛起英国观后感
2015/06/02 职场文书
信仰观后感
2015/06/03 职场文书
羊脂球读书笔记
2015/06/30 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技