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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
jquery validate表单验证插件
Sep 06 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
javascript数组去重方法分析
Dec 15 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
Mar 21 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
js模拟实现烟花特效
Mar 10 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
两款万能的php分页类
2015/11/12 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
JavaScript 对象模型 执行模型
2010/10/15 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python网站验证码识别
2016/01/25 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
navabi英国:设计师大码女装
2019/06/25 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
大学毕业感言200字
2014/03/09 职场文书
党员活动日总结
2014/05/05 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
python实现过滤敏感词
2021/05/08 Python