编程 Javascript

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>

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

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript开发规范要求(规范化代码)

Aug 16 Javascript

jquery入门—选择器实现隔行变色实例代码

Jan 04 Javascript

究竟什么是Node.js？Node.js有什么好处？

May 29 Javascript

js仿3366小游戏选字游戏

Apr 14 Javascript

Javascript中字符串replace方法的第二个参数探究

Dec 05 Javascript

浅谈Vue.js应用的四种AJAX请求数据模式

Aug 30 Javascript

js使用xml数据载体实现城市省份二级联动效果

Nov 08 Javascript

js保留两位小数方法总结

Jan 31 Javascript

webpack热模块替换（HMR）/热更新的方法

Apr 05 Javascript

JavaScript递归函数解“汉诺塔”算法代码解析

Jul 05 Javascript

Webstorm2016使用技巧(SVN插件使用)

Oct 29 Javascript

vue 集成jTopo 处理方法

Aug 07 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