`

21个css和Ajax表格

阅读更多

http://static.chinavisual.com/storage/contents/2007/11/29/45356T20071129131442_1.shtml

 

 

 

表格对于网页设计师来说再熟悉不过,随着web标准的兴起,表格不再承担架构网页布局的重任。回归到它本来的功能,表现数据。恐怕有很多网页设计师都没有兴趣,我们精选了当今互联网上正在应用的和已经设计好的21个css和Ajax表格,教你一些在表格里用分类和过滤的功能展示信息的有用的技巧。对您在设计网页时起到锦上添花的作用。

  1) Tablecloth
  
  下载地址:http://cssglobe.com/lab/tablecloth/

 

Tablecloth

  2) Create a table like Orbitz’s airline flights 
 
  下载地址:http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html

orbitz

  3) A CSS styled table

  下载地址:http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/

CSS styled table

 

4) Sortable Table

  下载地址:http://www.phatfusion.net/sortabletable/index.htm

row locking

 

  5) Row Locking with CSS and JavaScript

  下载地址:http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html

row locking




  6) Vertical scrolling tables
  
  下载地址:http://www.cssplay.co.uk/menu/tablescroll.html

Vertical scrolling tables

7) Replicating a Tree table
  
  下载地址:http://www.maxdesign.com.au/presentation/tree-table/

table tree

  8 ) Paginate, sort and search a table with Ajax and Rails

  下载地址:http://dev.nozav.org/rails_ajax_table.html

ajax tables

  9) Collapsible tables with DOM and CSS

  下载地址:http://www.maxdesign.com.au/presentation/tree-table/
  

Collapsible tables

10) TableSorter plug-in for jQuery
  
  下载地址:http://motherrussia.polyester.se/jquery-plugins/tablesorter/

TableSorter


  11) Stripe your tables the OO way

  下载地址:http://www.thewatchmakerproject.com/journal/309/stripe-your-tables-the-oo-way

TableSorter

  12) MOOTOOLS javascript Table Row & Column highlighting

  下载地址:http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php

  

mootools
13) CSS Table Gallery
  
  下载地址:http://icant.co.uk/csstablegallery/

css gallery

  14) jQuery Table Filter
  
  下载地址:http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm

jquery table filter




  15) Sortable/Resizable/Editable TableKit

  下载地址:http://www.millstream.com.au/upload/code/tablekit/

sortable, resizable, editable

 

16) Make all your tables sortable

  下载地址:http://www.kryogenix.org/code/browser/sorttable/

sortable table

 

  17) Zebra Tables
    
  下载地址:http://www.alistapart.com/articles/zebratables/

sortable table

  18 ) Standardista Table Sorting

  下载地址:http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting

sortable table

 

19) GridView3 Example

  下载地址:http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html

Grid

  20) Mootable
  
  下载地址:http://joomlicious.com/mootable/

MOOTOOLS

  21) Drag & Drop Sortable Lists with JavaScript and CSS
  
  下载地址:http://tool-man.org/examples/sorting.html

drag and drop

分享到:
评论

相关推荐

    21个新奇漂亮的AjaxCSS表格设计

    标题和描述均提到了“21个新奇漂亮的AjaxCSS表格设计”,这表明文章旨在介绍一系列结合了Ajax和CSS技术的创新表格设计方案。Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术,它允许网页...

    Tablecloth漂亮的Ajax+CSS表格

    由CSS Globe开发的Tablecloth,是一个轻量级且易用的解决方案,它巧妙地将CSS样式与Ajax技术结合,赋予了HTML表格更强大的功能和更为美观的外观。 ### Tablecloth的核心特点 1. **轻量级**:Tablecloth设计简洁,...

    php+mysql+ajax分页+表格table+loading效果+css(已测试成功)

    在IT行业中,网页开发是不可或缺的一部分,而PHP、MySQL、Ajax和CSS这四者是构建动态、交互式网站的关键技术。下面将详细解释这些技术及其在分页和...这个已经测试成功的解决方案可以作为开发类似功能的一个参考模板。

    设备缺陷管理 三层架构 DIV+CSS+AJAX+JQuery

    设备缺陷管理是一个重要的IT系统开发领域,特别是在工业自动化、物联网(IoT)和智能制造中,对设备缺陷的有效管理和预防是确保生产效率和安全的关键。在这个系统中,采用三层架构(Presentation Layer, Business ...

    ajax实现无刷新对数据库的操作(表格版).zip_ajax 表格_ajax 无刷新_ajax 表格_ajax 表格 数据_表

    服务器处理请求后,可能返回一个确认消息或新添加记录的ID,然后Ajax脚本在前端更新表格。 2. **删除操作**:删除操作通常涉及用户选择一条记录,然后点击“删除”按钮。Ajax脚本会获取选中行的ID或其他唯一标识符...

    利用JS+CSS实现滚动表格数据展示

    总结来说,通过结合JavaScript和CSS,我们可以创建一个既美观又实用的滚动表格,以适应网页中大量数据的展示需求。这不仅提高了数据的可读性,还优化了用户体验。同时,通过不断学习和实践,我们可以进一步完善这个...

    jQuery和CSS3实用响应式商品参数比较表格

    jQuery库是JavaScript的一个强大工具,它简化了DOM操作、事件处理、动画制作和Ajax交互等任务。在这个项目中,jQuery被用来处理表格的交互逻辑,比如展开和折叠比较项、高亮显示差异以及响应用户的点击事件。通过...

    jQuery+PureCSS可编辑表格插件

    jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个插件中,jQuery主要负责以下任务: - **事件绑定**:通过`$(element).click()`等方法监听用户对表格单元格的操作。 ...

    jPage jquery-ajax表格动态分页.zip

    《jPage:jQuery AJAX表格动态分页实现详解》 在网页开发中,数据展示往往涉及到大量的数据处理,尤其是在用户交互时,如何优雅地处理大量数据的分页展示,成为了提升用户体验的关键。jPage是一款基于jQuery的插件...

    AjAX CSS 小例子

    在IT领域,尤其是在Web开发中,AJAX (Asynchronous JavaScript and XML) 和CSS (Cascading Style Sheets) 是两个至关重要的技术。这个名为"AjAX CSS 小例子"的压缩包文件提供了一些实用的示例,帮助我们深入理解这...

    jqueryTreeTable+ajax(构建树形表格)

    本教程将详细讲解如何利用jQuery TreeTable插件结合AJAX和MySQL数据库,以及Spring、SpringMVC(SSM)架构来创建一个动态的树形表格。 **一、jQuery TreeTable介绍** jQuery TreeTable是一款轻量级的JavaScript...

    基于Java语言的Ajax动态表格设计源码分享

    本项目为基于Java语言的Ajax动态表格设计源码,集成了Java、JavaScript、CSS和HTML等多种编程语言,共计35个文件。其中包括8个Java文件、5个JavaScript文件、4个CSS文件、4个映射文件、2个HTML文件、1个Git忽略文件...

    表格编辑css美化及javascript

    CSS3还提供了更丰富的选择器和动画效果,如`:hover`用于鼠标悬停状态,`transition`或`animation`实现动态变换,让表格更具交互性。 JavaScript是一种强大的客户端脚本语言,用于实现网页的动态功能。在表格编辑中...

    js特效脚本含源码和说明Tablecloth漂亮的Ajax+CSS表格

    js特效脚本含源码和说明Tablecloth漂亮的Ajax+CSS表格本资源系百度网盘分享地址

    JSP+Dreamweaver_CS4+CSS+Ajax动态网站开发典型案例

    【知识点详解】 本文主要介绍的是使用JSP、Dreamweaver CS4、CSS和Ajax技术进行动态网站开发的经典...Dreamweaver CS4的增强功能使得网页设计变得更加直观和高效,而CSS和Ajax的使用则提升了网站的交互性和用户体验。

    AJAX的EXCEL表格功能

    5. **模板和样式**:通过CSS和JavaScript库(如jQuery或React),我们可以创建具有Excel样式的表格,包括单元格格式化、条件样式等,提供熟悉的用户体验。 6. **事件处理**:AJAX使得在表格单元格上的点击、双击、...

    JSP+Dreamweaver_CS4+CSS+Ajax动态网站开发典型案例.doc

    【标题】和【描述】提及的是使用Dreamweaver CS4结合JSP、CSS和Ajax技术进行动态网站开发的典型案例。这个文档可能是一个教程或者实践指南,涵盖了如何利用这些技术创建符合Web标准的网页。 【标签】再次强调了文档...

    使用AJAX动态生成table表格数据和jquery.pagination.js 的分页栏

    为了实现这一过程,我们需要在AJAX请求中加入一个参数来指定页码,然后在服务器端根据这个页码返回对应的数据。在前端,我们还需要更新分页插件的当前页码,使其与实际加载的页码保持一致。 总的来说,使用AJAX和`...

    Ajax+HTML+JS+CSS网站开发必备9本书

    1. **Ajax(异步JavaScript和XML)**:Ajax是一种在无需重新加载整个网页的情况下更新部分网页内容的技术。它通过JavaScript与服务器进行后台通信,实现页面的局部刷新,从而提高用户体验。书中会讲解如何使用...

Global site tag (gtag.js) - Google Analytics