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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

赞 (0)

相关推荐

  • 推荐25个超炫的jQuery网格插件

    推荐25个超炫的jQuery网格插件

    jQuery 网格插件可以让你创建各种各样的表格布局,网格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery的网格插件,你可以任意控制网格的行和列,用文本和图片进行填充.我用了顶级的来形容这个些插件,我可以肯定你了解它们之后会觉得很酷. 1. Gridify Gridify是轻量级的 jQuery 插件,用来创建一个类似 Pinterest 图片加载网格插件.支持图像加载事件,支持窗口缩放事件,支持非常长的高度项,支持动态项宽度,支持动画 (CSS

  • 使用jQuery jqPlot插件绘制柱状图

    使用jQuery jqPlot插件绘制柱状图

    在一个项目研发过程中,需要显示账户的资金情况,为了给客户良好的体验我们采用了柱状图形展现,绘图的过程如果使用原生态脚本绘制这样比较麻烦,时间也会比较长,所以我们选择了jqPlot插件进行绘制,这样可以节省大量的时间,也能很快就能展示给用户. 插件官方地址:http://www.jqplot.com/ 具体实现如下: 引用JS文件: 复制代码 代码如下: <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel=&q

  • 详解jQuery移动页面开发中的ui-grid网格布局使用

    详解jQuery移动页面开发中的ui-grid网格布局使用

    在移动设备上,屏幕宽度狭窄,因此通常不使用多栏布局,但是有时你可能需要将小的元素(如按钮或并排导航标签,例如)多列排列在一起.Jquery Mobile 框架提供了一种简单的方法构建基于css 的分栏布局,叫做ui-grid Jquery Mobile 提供有四个预设的布局,可以在任何情况下都需要列 两列(使用ui-grid-a类) 三列(使用ui-grid-b类) 四列(使用ui-grid-c类) 五列(使用ui-grid-d类) 网格是100%的宽度,完全看不见的(没有边界或背景)和没有ma

  • jqPlot jquery的页面图表绘制工具

    jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件--也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件. 这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法: 第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pieRenderer) 复制代码 代码如下: <!--[if IE]><script language="

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • jQuery实现的网格线绘制方法

    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="

  • JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完

  • jQuery简单创建节点的方法

    jQuery简单创建节点的方法

    本文实例讲述了jQuery简单创建节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-1

  • JQuery创建DOM节点的方法

    本文实例讲述了JQuery创建DOM节点的方法.分享给大家供大家参考.具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值.但真正的DOM操作并非这么简单.在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的. HTML DOM结构如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

  • Jquery实现遮罩层的方法

    本文实例讲述了Jquery实现遮罩层的方法.分享给大家供大家参考.具体如下: 1.假设#main为页面body中的最外层Div标签 2.背景被遮罩后,显示的弹出窗(默认是不显示的,所包含的CSS这里就不贴了): <!-- Status Bar Start --> <div id="warning-dialog" class="status warning center-top no-display"> <p class="cl

  • jQuery晃动层特效实现方法

    本文实例讲述了jQuery晃动层特效实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery搜索子元素的方法

    jQuery搜索子元素的方法

    本文实例讲述了jQuery搜索子元素的方法.分享给大家供大家参考.具体分析如下: 1. children()方法 用于获取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,语法格式如下: 复制代码 代码如下: children([selector]) $("#menu_ul").children().css("color", "blue"); 2. find()方法 用于从每个匹配元素中查找符合指定选择器表达式的后代元素,格式如下: 复制

  • jQuery实现伪分页的方法分享

    jQuery实现伪分页的方法分享

    本文实例讲述了jQuery实现伪分页的方法.分享给大家供大家参考,具体如下: 可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现. 实现的很简单.样式也不太好看,大家可以自行调整,纠正. 下面是一个table,tbody里加载tr数据,无论你怎么加载, 在数据加载完成后便可以对table数据进行伪分页.注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域 <table> <tbody id="dialog-items&q

随机推荐