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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
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
一个分页的论坛
2006/10/09 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
webpack将js打包后的map文件详解
2018/02/22 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
Python切片用法实例教程
2014/09/08 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
Python判断Abundant Number的方法
2015/06/15 Python
python操作redis方法总结
2018/06/06 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
教师实习自我鉴定
2013/12/14 职场文书
股票投资建议书
2014/05/19 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
飞屋环游记观后感
2015/06/08 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
导游词之太原天龙山
2020/01/02 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
修改并编译golang源码的操作步骤
2021/07/25 Golang
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技