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 相关文章推荐
Javascript UrlDecode函数代码
Jan 09 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
Node.js返回JSONP详解
May 18 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 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读取csv文件内容的详解
2013/06/18 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
express启用https使用小记
2019/05/21 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python中字符串的格式化方法小结
2016/05/03 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
安全生产检查通报
2014/01/29 职场文书
暑期社会实践方案
2014/02/05 职场文书
文秘大学生求职信
2014/02/25 职场文书
西安大雁塔导游词
2015/02/10 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Springboot中如何自动转JSON输出
2022/06/16 Java/Android