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显示和隐藏div特效实例
Feb 27 Javascript
js转义字符介绍
Nov 05 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
js中常用的Math方法总结
Jan 12 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
javascript对象3个属性特征
Nov 17 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
浅谈Vue.js
2017/03/02 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python怎么提高计算速度
2020/06/11 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
家长对小学生的评语
2014/01/28 职场文书
优秀幼教自荐信
2014/02/03 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
小学见习报告
2014/10/31 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS