利用JQUERY写一个简单实用的无限Table标签效果

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

杨教授工作室，版权所有，盗版必究， 1/20页 1 前 言

jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代

码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控

件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web

应用程序的UI界面。

随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交

互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；

同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何为不同的客户端设备提

供统一的Web应用界面，从而提高开发效率和降低开发成本。目前比较好的技术实现手段

是应用JQuery及JQuery UI系统库相关的技术。

作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校

软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍

jQuery UI中典型的应用组件技术。本文档主要涉及jQuery UI Accordion组件及技术特性、

Accordion组件的典型属性及应用示例、Accordion组件的典型事件及应用示例、如何重新

排序Accordion组件的Tab页头、如何拖动改变Accordion组件的大小等方面的内容。

欢迎读者下载相关的技术资料阅读和收藏，并提出良好的建议。感兴趣的读者可以在

百度文库页面中搜索“杨少波”，将能够搜索到杨教授工作室精心创作的优秀程序员职业提

升必读系列技术资料。

这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”

和“经验方法”等方面与读者进行充分的交流，也欢迎读者发表和交流自己对软件开发、

课程设计、项目实训、技术学习的心得体会。 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

jquery实现⾃定义树形表格的⽅法【⾃定义树形结构table】

本⽂实例讲述了jquery实现⾃定义树形表格的⽅法。分享给⼤家供⼤家参考，具体如下：

话不多说，直接上代码（本代码仅提供思路）：

function createTables(data, t, p) {

$("#datatable" + t + ' tbody').empty();

var count = data.length;

var html = '';

if (count > 0) {

for (var i = 0; i < count; i++) {

var btn = '';

if(data[i]._child && data[i]._child.length > 0){

btn = ' ';

}else{

btn = ' ';

}

html += '' +

''+btn + data[i].name + '（' + data[i].title + '）' + '' +

'' + (data[i].source_name ? data[i].source_name : '') + '' +

'' + data[i].show_time + '' +

'' + dataFormat(data[i].current_record, data[i].unit) + '' +

'' + dataFormat(data[i].prev_record, data[i].unit) + '' +

'' + dataFormat(data[i].last_record, data[i].unit) + '' +

'' + dataFormat(data[i].budget, data[i].unit) + '' +

'' + dataFormat(data[i].budget_rate, '%') + '' +

'' + dataFormat(data[i].record_rate) + '' +

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

杨教授工作室，版权所有，盗版必究， 1/32页 1 前 言

jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代

码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控

件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web

应用程序的UI界面。

随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交

互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；

同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何为不同的客户端设备提

供统一的Web应用界面，从而提高开发效率和降低开发成本。目前比较好的技术实现手段

是应用JQuery及JQuery UI系统库相关的技术。

作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校

软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍

jQuery UI中典型的应用组件技术。本文档主要涉及jQuery UI Tabs组件主要的技术特性、

Tabs组件主要的成员属性及应用示例、Tabs组件主要的事件及应用示例、如何创建普通的

Tabs组件实现示例以及如何创建特殊的Tabs组件实现示例等方面的内容。

杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料

杨教授工作室，版权所有，盗版必究， 2/32页 2

本 文 目 录

1.1 jQuery UI选项卡Tabs ................................................................................................................. 3

1.1.1 jQuery UI Tabs组件主要的技术特性 .................................................................................. 3

jQuery对table表格进⾏增删改查

最近要处理⼀些前端的⼯作，重新学习了⼀下jQuery，感觉还是那么的锋利啊

总结了⼀下对table的增删改查，写⼀篇留着以后⾃⼰recode。

1.⾸先我⾃⼰写了⼀个简单的div布局。

2.实现⼏个⽤标签做的按钮的功能 分别是新增 修改 删除 查询和返回。

代码如下

html+css（原谅我写在⼀起吧。。毕竟渲染不是我的强项）

测试数据

新增

查询

返回

ID

Name

salary

功能

保存

修改

删除

1

⼩王

3000

保存

修改

删除

2

⼩李

4000

保存

修改

删除

3

⼩张

5000

保存

修改

删除

4

⼩赵

6000

保存

修改

删除

jQuery的代码如下

$(document).ready(function(){

var tb = $("#tb");

//添加

$("#add_btn").click(function(){

var hideTr = $("#hide_tbody",tb).children().first();

var newTr = hideTr.clone().show();

$("#show_tbody",tb).append(newTr);

});

//保存

$("#save_btn",tb).die('click').live('click',function(){

var tr = $(this).parent().parent(); $("input[type='text']",tr).each(function(i,el){

el = $(el);

el.parent().text(el.val());

el.remove();