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 相关文章推荐
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
微信小程序实现日历签到
Sep 21 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
vue中axios封装使用的完整教程
Mar 03 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
ThinkPHP中redirect用法分析
2014/12/05 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Django 中 cookie的使用
2017/08/17 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
详解Vite的新体验
2021/02/22 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
django中related_name的用法说明
2020/05/20 Python
python语言中有算法吗
2020/06/16 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
宠物店的创业计划书范文
2014/01/11 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
大学军训感想
2014/02/12 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
财务主管岗位职责
2014/02/28 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
项目战略合作意向书
2015/05/08 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python