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 目录列举函数
Nov 06 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 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数组相关函数汇总
2015/03/24 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
用ADODB.Stream转换
2007/01/22 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
python 网络爬虫初级实现代码
2016/02/27 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Python中函数参数调用方式分析
2018/08/09 Python
python矩阵的转置和逆转实例
2018/12/12 Python
python opencv摄像头的简单应用
2019/06/06 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python 深度学习中的4种激活函数
2020/09/18 Python
简历中自我评价分享
2013/10/09 职场文书
合作协议书格式
2014/08/19 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
七年级数学教学反思
2016/02/17 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang