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 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
详解node中创建服务进程
May 09 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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中SESSION的注销与清除
2015/04/16 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Python语言描述连续子数组的最大和
2018/01/04 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
python程序需要编译吗
2020/06/19 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
教师简历自我评价
2014/02/03 职场文书
国际贸易专业求职信
2014/06/04 职场文书
电教室标语
2014/06/20 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
KTV员工管理制度
2015/08/06 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python