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定义类或函数的几种方式小结
Jan 09 Javascript
JavaScript 一道字符串分解的题目
Aug 03 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
vue全局使用axios的操作
Sep 08 Javascript
Vue通过懒加载提升页面响应速度
May 10 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 sprintf()函数用例解析
2011/05/18 PHP
php制作文本式留言板
2015/03/18 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
Js中sort()方法的用法
2006/11/04 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
优质服务活动实施方案
2014/05/02 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
2015年除四害工作总结
2015/07/23 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书