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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
vue中的inject学习教程
Apr 24 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
JavaScript定时器使用方法详解
Mar 26 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
扩展你的 PHP 之入门篇
2006/12/04 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php类自动加载器实现方法
2015/07/28 PHP
yii分页组件用法实例分析
2015/12/28 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Laravel下生成验证码的类
2017/11/15 PHP
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
Python如何重新加载模块
2020/07/29 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
校三好学生主要事迹
2014/01/11 职场文书
个人委托书格式
2014/04/04 职场文书
运动会宣传口号
2014/06/09 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL