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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
深入学习python多线程与GIL
2019/08/26 Python
Python 列表的清空方式
2020/01/13 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
新员工欢迎词
2014/01/12 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python