`

JQuery动态行列table

阅读更多
  项目使用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方法

Java代码 复制代码 收藏代码
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />   
  5. <style>   
  6. body {   
  7.     margin: 50px 100px;   
  8. }   
  9. #dataTable tr td{   
  10.     width: 100px;   
  11.     display: none;   
  12. }   
  13. .theader {   
  14.     background:#A4D4FC;   
  15. }   
  16.   
  17. </style>   
  18. <script src="jquery-1.8.1.js"></script>   
  19. <script type="text/javascript">   
  20. $(function(){   
  21. //init page   
  22. var columns = ['Column A''Column B''Column C''Column D''Column E''Column F''Column G'];   
  23. for(var i=0; i < columns.length; i++){   
  24.     //generate dropdown list   
  25.     $('#ColSelect').append('<option>' + columns[i] + '</option>');   
  26.     //generate header   
  27.     $('#dataTable tr[class="theader"]').append('<td id="head_' + (i+1) +'"></td>');   
  28.     //generate table body   
  29.     $('#dataTable tr[class="tbody"]').append('<td name="col_' + (i+1) + '"></td>');   
  30. }   
  31. //JSON format data   
  32. var data = {   
  33.     'Column A': ['A1''A2''A3''A4''A5'],   
  34.     'Column B': ['B1''B2''B3''B4''B5'],   
  35.     'Column C': ['C1''C2''C3''C4''C5'],   
  36.     'Column D': ['D1''D2''D3''D4''D5'],   
  37.     'Column E': ['E1''E2''E3''E4''E5'],   
  38.     'Column F': ['F1''F2''F3''F4''F5'],   
  39.     'Column G': ['G1''G2''G3''G4''G5']   
  40. };   
  41. //Generate tr as per data size   
  42. for(var i=0; ++i < data['Column A'].length; ){   
  43.     $('#dataTable').append($('#dataTable tr:last').clone());    
  44. }   
  45. //after tr generate, add stripe style on tr   
  46. $("#dataTable tr:even[class!='theader']").css("background","#EFEFEF");   
  47. //register event on dropdown list.   
  48. var colIndex = 0;   
  49. $('#ColSelect').change(function(e){   
  50.     $("#ColSelect option:selected").each(function () {   
  51.         var val = $(this).val();   
  52.         if(val){   
  53.             colIndex++;   
  54.             $(this).remove();//remove selected from dropdown   
  55.             $('#head_'+colIndex).text(val).show();//css('display', 'block');//display header, Note:css('display', 'block') have compatibility issue on FF   
  56.             var idx = 0;   
  57.             $('td[name="col_'+colIndex+'"]').each(function(){   
  58.                 $(this).text(data[val][idx++]).show();//loop to put value in each tr for one column   
  59.             });   
  60.         }   
  61.       });   
  62. });   
  63.        
  64. });   
  65. </script>   
  66. <title>JQuery</title>   
  67. </head>   
  68. <body>   
  69.     <select id="ColSelect">   
  70.         <option value="">--Select--</option>   
  71.     </select>   
  72.     <table id="dataTable">   
  73.         <tr class="theader"></tr>   
  74.         <tr class="tbody"></tr>   
  75.     </table>   
  76. </body>   
  77. </html>  
分享到:
评论

相关推荐

    jQuery实现动态给table赋值的方法示例

    本篇文章将深入探讨如何使用jQuery来动态地给HTML表格(table)赋值,通过一个具体的实例来展示相关技巧。 首先,我们需要一个基本的HTML结构,包含一个具有特定类和ID的table元素。在这个例子中,我们有一个layui...

    jQuery插件冻结行列、固定列固定行,html、table实现

    本篇将详细介绍一个基于jQuery的插件,用于实现表格的行列冻结功能,以及如何在HTML和Table中应用。 该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll",其主要功能是在表格滚动时保持顶部行和...

    jquery.table2excel.js.zip

    《使用jQuery插件jQuery.table2excel.js将HTML表格导出为Excel文件》 在现代Web开发中,数据的展示和管理往往离不开表格。HTML表格因其结构清晰、易于阅读,成为了网页上常用的数据呈现方式。然而,当用户需要保存...

    jquery锁定table 行列功能

    本篇文章将详细讲解如何利用jQuery实现表格(table)的行列锁定功能,这对于创建数据量较大但需要保持关键信息可视化的网页界面至关重要。 首先,锁定表格的行或列可以让用户在滚动页面时始终保持某些重要的头部...

    table 行列转置demo

    总的来说,“表格行列转置Demo”是一个结合了HTML、jQuery、JavaScript和Java技术的实用案例,展示了如何通过前后端协作实现动态数据操作。学习并理解这个示例,开发者可以提升自己的Web开发技能,特别是在数据展示...

    jquery行列合并例子

    在这个"jquery行列合并例子"中,我们关注的是如何利用jQuery来实现HTML表格中的行和列合并,这对于数据展示或者创建复杂的表格布局是至关重要的。 首先,我们需要引入jQuery库,这里使用的是"jquery-1.3.2.min.js...

    jquery 冻结行列

    在网页开发中,数据展示往往是不可或缺的部分,而表格(Table)是常见的数据呈现方式。当表格数据过多时,用户滚动查看可能会导致表头或某一列的内容丢失,这给阅读和理解带来不便。为解决这个问题,我们可以利用...

    jquery固定表格行列

    为了解决这一问题,我们可以利用jQuery库来实现表格的固定行列功能,让表头始终保持可见,即使在滚动时也是如此。本文将详细讲解如何使用jQuery实现这个功能。 首先,确保在项目中引入jQuery库,可以使用CDN链接...

    Jquery Table 固定行和列

    `jquery.superTable.js`可能包含自定义的jQuery方法,用于处理表格的滚动事件,动态更新固定行和列的显示。这些插件通常会监听滚动事件,计算滚动条的位置,并相应地调整固定元素的位置。 在实际应用中,这个插件...

    使用jquery给指定的table动态添加一行、删除一行

    支持动态删除一行。 先演示结果,如中意了在好好研究代码。 1、原始界面如下: 2、添加一行,如要添加一行需点击“添加”按钮,现点击两下会自动添加两行,效果如下截图: 3、删除一行,如要删除指定行,先要选中...

    table的行列冻结

    为了简化开发过程,许多库和框架提供了行列冻结的功能,如jQuery的`fixedHeaderTable`插件,或者Bootstrap的`freeze-pane`扩展。这些工具通常会提供更完善的解决方案,包括响应式设计和更好的性能优化。 ### 四、...

    webwork 中table动态增加行列

    在"webwork 中table动态增加行列"这个场景下,我们通常会创建一个名为`JzqdAction.java`的Action类,它将承载表格操作的逻辑。这个类可能包含以下几个关键方法: 1. `addRow()`: 这个方法会在表格中添加新的行。它...

    jQuery+CSS实现的table表格行列转置功能示例

    本示例介绍了一种使用jQuery和CSS实现的表格行列转置功能,非常适合那些需要动态变换表格展示方式的场景。 首先,让我们来理解这个功能的核心思路。表格行列转置通常是指将原来的行变成列,列变成行。在HTML中,`...

    table的行列冻结、行冻结、列冻结

    本主题主要围绕"table的行列冻结、行冻结、列冻结"展开,讲解如何使用jQuery实现这一功能,并确保其在主流浏览器上的兼容性。 首先,"行列冻结"是指在表格中固定特定的行和列,即使在用户滚动页面时,这些行和列也...

    jquery获取table指定行和列的数据方法(当前选中行、列)

    在前端开发中,表格(Table)是一种常见且重要的展示数据的方式。为了对表格数据进行操作,如获取用户选中的行和列数据,开发者常常需要使用JavaScript库,比如jQuery,来简化DOM操作和事件处理。在本文中,将详细...

    jQuery 选择表格(table)里的行和列及改变简单样式

    jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好,你可以读读这篇文章:jQuery table manipulation。本文只是介绍如何用jQuery语句...

    table表单增删行列例子

    本文将深入探讨如何在HTML中实现表格的动态增删行列。 一、HTML基础 在HTML中,`&lt;table&gt;`元素用于创建表格,`&lt;tr&gt;`表示表格行,`&lt;td&gt;`代表单元格,`&lt;th&gt;`则用于定义表头单元格。一个简单的表格结构可能如下: ```...

    jQuery实现获取table中鼠标click点击位置行号与列号的方法

    本文实例讲述了jQuery实现获取table中鼠标click点击位置行号与列号的方法。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang=en&gt; &lt;meta...

    固定Table行列滚动.zip

    "固定Table行列滚动"的主题就是针对这样的需求,它涉及到HTML表格(Table)、行(Row)和列(Col)的定位以及滚动条的实现。在网页中,我们可能需要一个表格来展示大量信息,但屏幕空间有限,这时候就需要实现表格的...

Global site tag (gtag.js) - Google Analytics