jQuery实现的网格线绘制方法


Posted in Javascript onJune 20, 2016

本文实例讲述了jQuery实现的网格线绘制方法。分享给大家供大家参考,具体如下:

效果图如下:

jQuery实现的网格线绘制方法

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>测试页面</title>
 <script type ="text/javascript" src='jquery-1.7.2.js'></script>
 <style type = "text/css">
  body{
  background:#000000;
  }
  #fa{
  width:380px;
  height:380px;
  margin:100px auto;
  background:#4b4b4b;
  }
 </style>
 <script type = "text/javascript">
  $(function(){
   var table = document.createElement("table");
   var tbody = document.createElement("tbody");
   table.style.borderCollapse = "collapse";
   for(var i = 0;i<20;i++){
   var tr = document.createElement("tr");
   for(var j = 0;j<20;j++){
    var td = document.createElement("td");
    var text = document.createTextNode("");
    td.style.border = "1px solid #dfdfdf";
    td.style.padding = "9px";
    td.appendChild(text);
    tr.appendChild(td);
   }
   table.appendChild(tr);
   }
   document.getElementById("fa").appendChild(table);
  })
 </script>
 </head>
 <body>
 <input type = "button" value = "测试按钮" id = "test"/>
 <div id = "fa"></div>
 </body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 #Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 #Javascript
Javascript中的arguments对象
Jun 20 #Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 #Javascript
BootStrap selectpicker
Jun 20 #Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 #Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 #Javascript
You might like
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
javascript实现连续赋值
2015/08/10 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
机械设计专业应届生求职信
2013/11/21 职场文书
自我评价如何写好?
2014/01/05 职场文书
酒吧创业计划书
2014/01/18 职场文书
毕业自我鉴定书
2014/03/24 职场文书
学党史心得体会
2014/09/05 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
合伙购房协议样本
2014/10/06 职场文书
单位更名证明
2015/06/18 职场文书