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 Plugin 插件的方法
Apr 20 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 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中使用Oracle数据库(1)
2006/10/09 PHP
聊天室php&amp;mysql(三)
2006/10/09 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
php构造函数与析构函数
2016/04/23 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
Node.js编码规范
2014/07/14 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Javascript缓存API
2016/06/14 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python中关于数据类型的学习笔记
2020/07/19 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
python drf各类组件的用法和作用
2021/01/12 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
创先争优制度
2014/01/21 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
通知范文怎么写
2015/04/16 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang