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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
js登录弹出层特效
Mar 07 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 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
SONY SRF-40W电路分析
2021/03/02 无线电
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP中显示格式化的用户输入
2006/10/09 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
迟到检讨书大全
2014/01/25 职场文书
《日月潭》教学反思
2014/02/28 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers