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 相关文章推荐
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
小程序实现投票进度条
Nov 20 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
set_include_path在win和linux下的区别
2008/01/10 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
Javascript数组Array基础介绍
2016/03/13 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
Python 模拟购物车的实例讲解
2017/09/11 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
Django密码系统实现过程详解
2019/07/19 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
如何用python批量调整视频声音
2020/12/22 Python
英国在线药房:Express Chemist
2019/03/28 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
个人简历自我评价八例
2013/10/31 职场文书
中式婚礼主持词
2014/03/13 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
python文件目录操作之os模块
2021/05/08 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python