`
yanfaguanli
  • 浏览: 658559 次
文章分类
社区版块
存档分类
最新评论

最简单的jQuery创建表格

 
阅读更多


最简单的jQuery创建表格


利用jQuery创建表格、主要是用到jQuery的两个方法:appendTo($("#nodeId"))、append(“html”) 、先使用jQuery创建一个表格头var table = $("<table border = \"1\" >");然后将此变量追加到页面放置此table的地方、然后再创建tr、将tr追加到table上、再创建td、将td追加到tr上、、、最后添加表格的结束标签$("#createTable").append("</table>");


HTML代码:


  1. <!DOCTYPEhtml>
  2. <HTML>
  3. <HEAD>
  4. <TITLE>dynamiccreatetable</TITLE>
  5. <scripttype="text/javascript"src="jquery-1.7.2.min.js"></script>
  6. <SCRIPTtype="text/javascript">
  7. functioncreateTable(rowNum,clomnNum){
  8. vartable=$("<tableborder=\"1\">");
  9. table.appendTo(($("#createTable")));
  10. for(vari=0;i<rowNum;i++){
  11. vartr=$("<tr></tr>");
  12. tr.appendTo(table);
  13. for(varj=0;j<clomnNum;j++){
  14. vartd=$("<td>"+i*j+"</td>");
  15. td.appendTo(tr);
  16. }
  17. }
  18. $("#createTable").append("</table>");
  19. }
  20. </SCRIPT>
  21. </HEAD>
  22. <BODY>
  23. <inputtype="button"value="create"onclick="createTable(5,6)"/>
  24. </br>
  25. <divid="createTable"></div>
  26. </BODY>
  27. </HTML>
分享到:
评论

相关推荐

    超实用的jQuery代码段

    5.1 最简单的用户输入自动完成 5.2 使用远程数据源的自动完成 5.3 带缓存的自动完成 5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放...

    jQuery详细教程

    演示简单的 jQuery animate() 函数。 &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#start").click(function(){ $("#box")....

    Jquery 动态循环输出表格具体方法

    如果是PHP的话就简单多了,Jquery实现还是第一个,就开始狂的实验,最后还是实现了(知识点:Jquery创建节点、获取表单的值、循环语句)Jquery代码: 代码如下: [removed]$(function(){$(“#btn”).click(function...

    jQuery完全实例.rar

    这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML 文档中查找 DOM 元素;如果指定了 ...

    健身俱乐部Web网站-JSP+Servlet+Hibernate+jQuery+Ajax

    5.为表格添加更多的CSS样式,让表格更美观点 6.某些页面应该提供分页显示(时间紧没处理) 7.由于是第一次做网站,且时间比较紧(这段时间期末考试),所以对于一些细节问题,如防止表单重复提交、某些页面的访问...

    jQuery Easyui实现左右布局

    在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架。 1.在页面中引入easyui所需的文件 &lt;&#37;-- 加载eas

    SorlJS:SolrJSView 是一个与 Apache Solr 接口的 JavaScript Jquery 文本搜索库。 结果以构面格式、表格格式和弹出文档格式呈现

    SolrJS视图SolrJSView 是一个 JavaScript/Jquery Web 前端库,用于创建 [Apache SOLR] 的用户界面。 数据显示在表格和弹出式文档视图中。 该应用程序还可以使用 Maven 部署为任何 J2EE Web 容器中的 WAR 文件。 这个...

    spreadbutler:提供从网页内访问电子表格的权限

    名称 SpreadButler-一种从网页内访问电子表格的系统 ... 最简单的方法是运行 $ cd setup $ ./build-perl-modules.sh 这将创建一个第三方目录,并将所有必需的位复制到该目录中。 设置一个目录,用于存储要通过Sp

    ASP.NET MVC+EF6+Bootstrap开发C#源代码

    包括源代码、数据库文档、数据库创建SQL脚本。一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架源代码! 采用主流框架,容易上手,简单易学,学习成本低。可完全实现二次开发、基本满足80%项目需求。 可以帮助...

    Knockout API 中文版

    Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很...

    GoodProject Maven Webapp.zip

    jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。 ...

    日程安排

    创建一个简单的日历应用程序,该应用程序允许用户通过修改启动程序代码来保存一天中每个小时的事件。 该应用程序将在浏览器中运行,并具有由jQuery驱动的动态更新HTML和CSS。 您需要使用类的库来处理日期和时间。 ...

    银河年龄计算器

    银河年龄计算器根据各种行星转换您的年龄耶隆·范·塞特斯(Jeroen van Seeters)使用的技术HTML CSS 引导程序JavaScript jQuery的网络包描述这是一个简单的网页,旨在演示我使用webpack以及各种加载程序和插件为...

    Kronometro-Tomata:Tomata 番茄式计时器 Kronometer

    我个人喜欢用简单的笔和笔记本来记录活动,其他人更喜欢使用复杂的电子表格方法。 KT 留给你。 KT 最初是为了纠正我和我的朋友们在流行的 Tomato Timer 网络应用程序中看到的弱点的项目。 这也是一个让我习惯编写 ...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    史上最全韩顺平毕业班视频------这里只有10月份,8,9,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....

    史上最全传智播客PHP就业班视频课,8月份视频

    史上最全韩顺平毕业班视频------这里只有8月份,9,10,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....

    史上最全韩顺平传智播客PHP就业班视频,9月份全集

    史上最全韩顺平毕业班视频------这里只有9月份,8,10,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....

    JAVA上百实例源码以及开源项目源代码

    2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。...

Global site tag (gtag.js) - Google Analytics