21个漂亮的Ajax+Table实例

<script language="JavaScript" type="text/javascript"> </script> href="/freezesoul/css/item/c14578f406463ed9f2d38581.css" type="text/css" rel="stylesheet" /> href="/space.css" type="text/css" rel="stylesheet" />

<script type="text/javascript"> var myref = encodeURI("http://hi.baidu.com/freezesoul/blog/item/ca69a818f806610435fa411a%2Ehtml");</script>

<script type="text/javascript"> var objmain = document.getElementById("main"); function updatesize(){ var bodyw = window.document.body.offsetWidth; if(bodyw <= 790) objmain.style.width="772px"; else if(bodyw >= 1016) objmain.style.width="996px"; else objmain.style.width="100%"; } updatesize(); window.onresize = updatesize; </script>

查看文章

21个漂亮的Ajax+Table实例

1) Tablecloth - Css Globe has decided to present Tablecloth. Which is a lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements.   2) Create a table like Orbitz’s airline flights- The Css Guy taught us how to create a table that would give an indication of relationships among the information provided for example - clicking on a cell should highlight the associated cell in the top row and left most column.   3) A CSS styled table- Veerle Duoh has demonstrated a beautiful usage of tables, for tabular data while implementing them with accessibility in mind and how to make them appealing for the eye using CSS.   4) Sortable Table Sort the columns in a table and filter elements in the table.   5) Row Locking with CSS and JavaScript - Again The Css Guy refered to this technique as ‘row locking’, since the effect stays in place until the user re-clicks (or unlocks) the row.   He also added another example to Lock rows with radios . 6) Vertical scrolling tablesIf you have a lot of table data but not much room to display it, then this might be the answer. A css only styled table with fixed column headings and footer and scrolling content./p>   7) Replicating a Tree table-The aim is to replicate a graphic table tree using HTML./p>   8 ) Paginate, sort and search a table with Ajax and Rails-This example provide a dynamic interface which doesn’t need to reload the entire page when the table changes.   9) Collapsible tables with DOM and CSS-This script add the arrow images in the footer allowing the table to be collapsed and expanded.   10) TableSorter plug-in for jQuery-Its main features include Multi-column sorting, Support for rowspan and colspan on TH elements and many other features   11) Stripe your tables the OO way-The ‘stripe’ method runs through each row in the specified table and applies the ‘alt’ class, then adds onmouseover and onmouseout functions.   12) MOOTOOLS javascript Table Row & Column highlighting-This shows an mootools javascript example that highlights the table row and column of the cell you are hovering over.   13) CSS Table Gallery-This is a showcase of 93 styled tables.   14) jQuery Table FilterThis example sorts/filters multiple columns   15) Sortable/Resizable/Editable TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.   16) Make all your tables sortable   17) Zebra TablesAlistapart has provided us an excellent example of using JavaScript and the DOM to apply background-color styles to table cells.   18 ) Standardista Table Sorting is a JavaScript module that lets you sort an HTML data table by any column.   19) GridView3 Example   20) Mootable Because they are made from standard tables, they degrade nicely.   21) Drag & Drop Sortable Lists with JavaScript and CSS   For those of you looking for even more detailed information, here are links to some further reading:   Further Readings: Bring on the Tables Accessible Data Tables Designing Data Tables Brainjar Table Sort Table Sorter

<script type="text/javascript"> function writecmt(type,id,cmtname,cmturl,portraitId){ var html1=""; if(type==1){ html1="
"+cmtname+""; }else{ if(cmtname=="" || cmtname=="匿名网友"){ if(cmturl==""){ html1=" 匿名网友"; }else{ html1=" "+cmtname+""; } }else{ if(cmturl==""){ html1="

网友: "+cmtname+"

"; }else{ html1="

网友: "+cmtname+"

"; } } } document.write(html1); } </script>

<script language="javascript" type="text/javascript"> </script> <script src="/freezesoul/brwstat?key1=1&key2=97aa35d1ec63ba389b5027ff_ca69a818f806610435fa411a_" type="text/javascript"></script>

<script type="text/javascript"> if(document.getElementById("m_blog")) { var imgarray = document.getElementById("m_blog").getElementsByTagName('img'); var imgw = document.getElementById("m_blog").offsetWidth; imgw =imgw-40; for(var i=0; i =imgw) imgarray[i].width=imgw; } } </script>