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 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
Jun 04 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
js实现打字小游戏
Dec 17 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
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
php代码优化及php相关问题总结
2006/10/09 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
培养自己的php编码规范
2015/09/28 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python做文本按行去重的实现方法
2016/10/19 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
图解Python变量与赋值
2018/04/03 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python实现移位加密和解密
2019/03/22 Python
Python编写打字训练小程序
2019/09/26 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
大学生军训广播稿
2014/01/24 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
学习党代会心得体会
2014/09/05 职场文书
法律意见书范文
2015/05/20 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android