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 相关文章推荐
js日期时间补零的小例子
Mar 05 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
js随机生成一个验证码
Jun 01 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
Sep 15 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
React中使用Vditor自定义图片详解
Dec 25 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
微信API接口大全
2015/04/15 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
详解【python】str与json类型转换
2019/04/29 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
NET程序员上机面试题
2015/05/23 面试题
什么是Smart Navigation?
2016/07/03 面试题
四川成都导游欢迎词
2014/01/18 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
乳制品整治工作方案
2014/05/29 职场文书
预备党员综合考察材料
2014/05/31 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
2019公司管理制度
2019/04/19 职场文书
优秀大学生申请书
2019/06/24 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers