JQuery 动态生成Table表格实例代码


Posted in Javascript onDecember 02, 2016

JQuery动态生成Table表格

主要用到了JQuery中的append和appendto的方法,具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态创建表格</title>
<script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
 function CreateTable(rowCount,cellCount)
 { 
   var table=$("<table border=\"1\">");
   table.appendTo($("#createtable"));
   for(var i=0;i<rowCount;i++)
   {
    var tr=$("<tr></tr>");
    tr.appendTo(table);
    for(var j=0;j<cellCount;j++)
    {
      var td=$("<td>"+i*j+"</td>");
      td.appendTo(tr);
    }
   }
   trend.appendTo(table);
   $("#createtable").append("</table>");
 }
</script>
</head>
 
<body>
<input type="button" value="添加表格" onClick="CreateTable(5,6)" >
<input type="button" value="添加行">
<div id="createtable"></div>
<div id="createrow"></div>
</body>
</html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
模拟多级复选框效果的jquery代码
Aug 13 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
jQuery实现背景滑动菜单
Dec 02 #Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 #Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 #Javascript
基于jQuery实现的幻灯图片切换
Dec 02 #Javascript
JavaScript中清空数组的方法总结
Dec 02 #Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 #Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 #Javascript
You might like
谈谈新手如何学习PHP
2006/12/23 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Python实现的Excel文件读写类
2015/07/30 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
生日宴会策划方案
2014/06/03 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
高中生军训感言
2015/08/01 职场文书