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中hasOwnProperty()的作用
Jun 05 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
详解js 创建对象的几种方法
Mar 08 Javascript
微信小程序实现文件预览
Oct 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
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
深入解析php中的foreach函数
2013/08/31 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
javascript常用方法总结
2015/05/14 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python中的字典详细介绍
2014/09/18 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python3.5安装python3-tk详解
2019/04/26 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
行政人事经理职位说明书
2014/03/05 职场文书
班主任个人工作反思
2014/04/28 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL