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检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
jquery的map与get方法详解
Nov 04 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
angular4自定义组件详解
Sep 28 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
解决vue组件中click事件失效的问题
Nov 09 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
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
mysql 全文搜索 技巧
2007/04/27 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
JS的反射问题
2010/04/07 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
es6数值的扩展方法
2019/03/11 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python逐行读取文件内容的三种方法
2014/01/20 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
mac使用python识别图形验证码功能
2020/01/10 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python实现二分查找算法
2020/09/18 Python
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
实习教师自我鉴定
2013/12/09 职场文书
士力架广告词
2014/03/20 职场文书
《菜园里》教学反思
2014/04/17 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL