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 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
canvas 实现中国象棋
Feb 17 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 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
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
python递归函数绘制分形树的方法
2018/06/22 Python
Python Grid使用和布局详解
2018/06/30 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
详解重置Django migration的常见方式
2019/02/15 Python
python实现图片九宫格分割
2021/03/07 Python
python软件都是免费的吗
2020/06/18 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
党旗在我心中演讲稿
2014/09/15 职场文书
委托证明模板
2014/09/16 职场文书
七年级地理教学计划
2015/01/22 职场文书
2015年教研组工作总结
2015/05/04 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
python实现高效的遗传算法
2021/04/07 Python
Django展示可视化图表的多种方式
2021/04/08 Python