JQuery 动态生成Table表格实例代码

更新时间：2016年12月02日 17:17:13 投稿：lqh

这篇文章主要介绍了JQuery 动态生成Table表格实例代码的相关资料,这里附有实现实例代码，具有一定的参考价值，需要的朋友可以参考下

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>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

浅析onsubmit校验表单时利用ajax的return false无效问题
前几天，在校验一个表单数据用到ajax时，遇到 return false 无效问题,以下就是对这个问题进行了分析介绍，需要的朋友可以参考下
2013-07-07
jQuery使用ajax方法解析返回的json数据功能示例
这篇文章主要介绍了jQuery使用ajax方法解析返回的json数据功能,结合实例形式分析了jQuery ajax操作流程及json数据处理技巧,需要的朋友可以参考下
2017-01-01
jquery模拟SELECT下拉框取值效果
说到模拟SELECT框，想必大家第一想到的就是使用javascript吧，其实是jquery也是可以做到的，下面有个不错的示例，感兴趣的朋友可以参考下
2013-10-10
jQuery限制图片大小的方法
这篇文章主要介绍了jQuery限制图片大小的方法,对比分析了常见的jQuery限制图片操作方法及改进方法,具有一定参考借鉴价值,需要的朋友可以参考下
2016-05-05
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
deferred对象的延迟功能对jQuery的ajax操作是一个很大的帮助,尤其是回调控制,下面我们就来看一下对jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016-05-05
jQuery弹出框代码封装DialogHelper
这篇文章主要介绍了jQuery弹出框代码封装DialogHelper的方法,需要的朋友可以参考下
2015-01-01
浏览器打开层自动缓慢展开收缩实例代码
本文为大家介绍下层自动缓慢展开收缩在浏览器打开时是如何实现的，主要用到了slideUp及slideDown等主要jquery方法，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
jQuery中outerHeight()方法用法实例
这篇文章主要介绍了jQuery中outerHeight()方法用法,实例分析了outerHeight()方法的功能、定义及获取第一个匹配元素外部高度的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery模板技术和数据绑定实现代码
如果你用过ASP.NET的数据绑定控件，也用过ASP或者JSP里那种通过输出HTML元素在页面上显示数据的方法，你就知道ASP.NET数据绑定控件有多么方便。如果能够将同样的功能在浏览器端用HTML和JavaScript实现，那该是多少美妙的事情。
2010-05-05
easyui Draggable组件实现拖动效果
Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们可以实现控件的拖拽效果。Draggble覆盖默认值$.fn.draggable.defaults。
2015-08-08