- 浏览: 852019 次
文章分类
- 全部博客 (365)
- java (124)
- spring mvc (21)
- spring (22)
- struts2 (6)
- jquery (27)
- javascript (24)
- mybatis/ibatis (8)
- hibernate (7)
- compass (11)
- lucene (26)
- flex (0)
- actionscript (0)
- webservice (8)
- rabbitMQ/Socket (15)
- jsp/freemaker (5)
- 数据库 (27)
- 应用服务器 (21)
- Hadoop (1)
- PowerDesigner (3)
- EJB (0)
- JPA (0)
- PHP (2)
- C# (0)
- .NET (0)
- html (2)
- xml (5)
- android (7)
- flume (1)
- zookeeper (0)
- 证书加密 (2)
- maven (1)
- redis (2)
- cas (11)
最新评论
-
zuxianghuang:
通过pom上传报错 Artifact upload faile ...
nexus上传了jar包.通过maven引用当前jar,不能取得jar的依赖 -
流年末年:
百度网盘的挂了吧???
SSO单点登录系列3:cas-server端配置认证方式实践(数据源+自定义java类认证) -
953434367:
UfgovDBUtil 是什么类
Java发HTTP POST请求(内容为xml格式) -
smilease:
帮大忙了,非常感谢
freemaker自动生成源代码 -
syd505:
十分感谢作者无私的分享,仔细阅读后很多地方得以解惑。
Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解
项目使用JQuery,有个数据回显页面,客户要求提供一个下拉列表,通过选择下拉列表中的数据来定制数据表格的列。用户选择一个,表格就会相应的加一列来显示用户的选择。用Jquery做了简单的实现,初次接触JQuery(以前用EXTJS),还没有从EXT那种企业级的js框架中缓过劲儿来。做这个例子过程中记录了一些笔记,便于以后翻查:
1. 选择器返回的jquery对象不需要判空,而且支持链式操作,这是和extjs很大的区别,对习惯了java编程的人说稍稍有点不习惯
2. JQuery对DOM节点的控制特别灵活。虽然EXTJS也可以实现类似的动作但是它毕竟是面向组件的,这种外科手术似的小操作不是EXT的本功。
3. JQuery的浏览器兼容性比EXT要好的多,这是EXT自己的软肋。这个例子碰到一个兼容性的问题(.css('display', 'block')在IE下正常但是在FF下所有的列都挤到第一列中了,可以google一下'CSS display', 改为使用JQuery的show方法
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <style>
- body {
- margin: 50px 100px;
- }
- #dataTable tr td{
- width: 100px;
- display: none;
- }
- .theader {
- background:#A4D4FC;
- }
- </style>
- <script src="jquery-1.8.1.js"></script>
- <script type="text/javascript">
- $(function(){
- //init page
- var columns = ['Column A', 'Column B', 'Column C', 'Column D', 'Column E', 'Column F', 'Column G'];
- for(var i=0; i < columns.length; i++){
- //generate dropdown list
- $('#ColSelect').append('<option>' + columns[i] + '</option>');
- //generate header
- $('#dataTable tr[class="theader"]').append('<td id="head_' + (i+1) +'"></td>');
- //generate table body
- $('#dataTable tr[class="tbody"]').append('<td name="col_' + (i+1) + '"></td>');
- }
- //JSON format data
- var data = {
- 'Column A': ['A1', 'A2', 'A3', 'A4', 'A5'],
- 'Column B': ['B1', 'B2', 'B3', 'B4', 'B5'],
- 'Column C': ['C1', 'C2', 'C3', 'C4', 'C5'],
- 'Column D': ['D1', 'D2', 'D3', 'D4', 'D5'],
- 'Column E': ['E1', 'E2', 'E3', 'E4', 'E5'],
- 'Column F': ['F1', 'F2', 'F3', 'F4', 'F5'],
- 'Column G': ['G1', 'G2', 'G3', 'G4', 'G5']
- };
- //Generate tr as per data size
- for(var i=0; ++i < data['Column A'].length; ){
- $('#dataTable').append($('#dataTable tr:last').clone());
- }
- //after tr generate, add stripe style on tr
- $("#dataTable tr:even[class!='theader']").css("background","#EFEFEF");
- //register event on dropdown list.
- var colIndex = 0;
- $('#ColSelect').change(function(e){
- $("#ColSelect option:selected").each(function () {
- var val = $(this).val();
- if(val){
- colIndex++;
- $(this).remove();//remove selected from dropdown
- $('#head_'+colIndex).text(val).show();//css('display', 'block');//display header, Note:css('display', 'block') have compatibility issue on FF
- var idx = 0;
- $('td[name="col_'+colIndex+'"]').each(function(){
- $(this).text(data[val][idx++]).show();//loop to put value in each tr for one column
- });
- }
- });
- });
- });
- </script>
- <title>JQuery</title>
- </head>
- <body>
- <select id="ColSelect">
- <option value="">--Select--</option>
- </select>
- <table id="dataTable">
- <tr class="theader"></tr>
- <tr class="tbody"></tr>
- </table>
- </body>
- </html>
发表评论
-
jQuery自动加载更多程序
2015-03-12 13:16 4161.1.1 摘要 现在,我们经常使用的 ... -
给jQuery Validate添加一个好看点的提示框。
2014-10-15 10:48 708弄个箭头是不 ... -
轻量级图形报表工具JSCharts (JSChart),内置函数中文参考
2014-08-26 15:26 997轻量级图形报表工具JSCharts (JSChart),内置 ... -
基于1.3.3版本tooltip的datagrid单元格tip实现
2014-07-23 09:00 717文章目录 [隐藏] 1实现代 ... -
jQuery easyUI动态获取表结构并显示表中的数据)
2014-07-23 08:36 7656问题描述一: 首先根据输入的sql语句获得相关的列 ... -
jQuery plugin: Autocomplete 参数及实例
2014-07-18 10:34 618此插件依赖于 jquery 1.2.6 --- jqu ... -
kindeditor4.0.6的使用方法(jsp+struts2)
2014-07-17 08:58 779最近在研究kindeditor4.0.6在struts框架下 ... -
jQuery分别获取选中的复选框值
2014-04-01 13:12 849function jqchk(){ //j ... -
基于jquery获取光标所在位置
2012-12-20 13:32 11669// //使用方法 //$(文本域选择器).insertCon ... -
jquery easyui 组合校验的方法
2012-12-04 14:00 1311先前的jquery easyui 不支持组合校验,我改了一下源 ... -
一键下载75款常用的jquery特效前端网页代码+表格验证框架
2012-11-02 18:08 1043一键下载75款常用的jquery特效前端网页代码+表格验证框架 ... -
Jquery ul下拉框效果
2012-10-26 15:25 911html select下拉框样式在网站开发时很难控 ... -
jquery.validate 扩展验证+异步验证
2012-10-25 15:05 1424validate_expand.js ... -
jquery获取url及起参数列表
2012-10-19 20:02 973在基于B/S的web开发中,我们时常会通过发请求给 ... -
兼容IE,firefox,chrome,safari预加载图片height和width获取
2012-09-21 23:51 1638在web开发中我们有时需要通过js去预加载图片,按 ... -
个人呕心沥血之作-----js大脑图beta01版正式发布
2012-09-20 22:26 847本博客只开博以来一直是分类的方式去给大 ... -
电子商务图片放大jqzoom
2012-09-16 10:53 4063http://www.mind-projects.it/ 官网 ... -
jQuery中10个非常有用的遍历函数
2012-09-09 08:11 782使用jQuery,可以 很容易的选择HTML元素。但有些时候, ... -
轻松使用jquery解析XML
2012-09-09 08:12 937xml文件结构:books.xml <?xml vers ... -
JSON-lib框架,转换JSON、XML不再困难
2012-09-09 08:12 980Json-lib可以将Java对象转成json格式的字符串 ...
相关推荐
本篇文章将深入探讨如何使用jQuery来动态地给HTML表格(table)赋值,通过一个具体的实例来展示相关技巧。 首先,我们需要一个基本的HTML结构,包含一个具有特定类和ID的table元素。在这个例子中,我们有一个layui...
本篇将详细介绍一个基于jQuery的插件,用于实现表格的行列冻结功能,以及如何在HTML和Table中应用。 该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll",其主要功能是在表格滚动时保持顶部行和...
《使用jQuery插件jQuery.table2excel.js将HTML表格导出为Excel文件》 在现代Web开发中,数据的展示和管理往往离不开表格。HTML表格因其结构清晰、易于阅读,成为了网页上常用的数据呈现方式。然而,当用户需要保存...
本篇文章将详细讲解如何利用jQuery实现表格(table)的行列锁定功能,这对于创建数据量较大但需要保持关键信息可视化的网页界面至关重要。 首先,锁定表格的行或列可以让用户在滚动页面时始终保持某些重要的头部...
总的来说,“表格行列转置Demo”是一个结合了HTML、jQuery、JavaScript和Java技术的实用案例,展示了如何通过前后端协作实现动态数据操作。学习并理解这个示例,开发者可以提升自己的Web开发技能,特别是在数据展示...
在这个"jquery行列合并例子"中,我们关注的是如何利用jQuery来实现HTML表格中的行和列合并,这对于数据展示或者创建复杂的表格布局是至关重要的。 首先,我们需要引入jQuery库,这里使用的是"jquery-1.3.2.min.js...
在网页开发中,数据展示往往是不可或缺的部分,而表格(Table)是常见的数据呈现方式。当表格数据过多时,用户滚动查看可能会导致表头或某一列的内容丢失,这给阅读和理解带来不便。为解决这个问题,我们可以利用...
为了解决这一问题,我们可以利用jQuery库来实现表格的固定行列功能,让表头始终保持可见,即使在滚动时也是如此。本文将详细讲解如何使用jQuery实现这个功能。 首先,确保在项目中引入jQuery库,可以使用CDN链接...
`jquery.superTable.js`可能包含自定义的jQuery方法,用于处理表格的滚动事件,动态更新固定行和列的显示。这些插件通常会监听滚动事件,计算滚动条的位置,并相应地调整固定元素的位置。 在实际应用中,这个插件...
支持动态删除一行。 先演示结果,如中意了在好好研究代码。 1、原始界面如下: 2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图: 3、删除一行,如要删除指定行,先要选中...
为了简化开发过程,许多库和框架提供了行列冻结的功能,如jQuery的`fixedHeaderTable`插件,或者Bootstrap的`freeze-pane`扩展。这些工具通常会提供更完善的解决方案,包括响应式设计和更好的性能优化。 ### 四、...
在"webwork 中table动态增加行列"这个场景下,我们通常会创建一个名为`JzqdAction.java`的Action类,它将承载表格操作的逻辑。这个类可能包含以下几个关键方法: 1. `addRow()`: 这个方法会在表格中添加新的行。它...
本示例介绍了一种使用jQuery和CSS实现的表格行列转置功能,非常适合那些需要动态变换表格展示方式的场景。 首先,让我们来理解这个功能的核心思路。表格行列转置通常是指将原来的行变成列,列变成行。在HTML中,`...
本主题主要围绕"table的行列冻结、行冻结、列冻结"展开,讲解如何使用jQuery实现这一功能,并确保其在主流浏览器上的兼容性。 首先,"行列冻结"是指在表格中固定特定的行和列,即使在用户滚动页面时,这些行和列也...
在前端开发中,表格(Table)是一种常见且重要的展示数据的方式。为了对表格数据进行操作,如获取用户选中的行和列数据,开发者常常需要使用JavaScript库,比如jQuery,来简化DOM操作和事件处理。在本文中,将详细...
jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好,你可以读读这篇文章:jQuery table manipulation。本文只是介绍如何用jQuery语句...
本文将深入探讨如何在HTML中实现表格的动态增删行列。 一、HTML基础 在HTML中,`<table>`元素用于创建表格,`<tr>`表示表格行,`<td>`代表单元格,`<th>`则用于定义表头单元格。一个简单的表格结构可能如下: ```...
本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head lang=en> <meta...
"固定Table行列滚动"的主题就是针对这样的需求,它涉及到HTML表格(Table)、行(Row)和列(Col)的定位以及滚动条的实现。在网页中,我们可能需要一个表格来展示大量信息,但屏幕空间有限,这时候就需要实现表格的...