Frequency decoder | Unobtrusive Table Sort Script (revisited) My first free Sunday morning in what seems like an epoch produces a complete rewrite of the original (and by far most popular) lab experiment, the “Unobtrusive Table Sort Script”, that addresses speed issues present within version #1. At a glance… The Slowdown The original script attempted to grab the inner text of every TD node within the column to be sorted, each and every time the sort routine was activated.
This was an extremely processor intensive action and the main cause of slowdown during the sort of large tables. Speeding things up The new script addresses these issues by creating and storing an internal representation of the parsed table data the very first time that one of the table’s sortable TH nodes is activated (i.e. a 2D matrix of the parsed table data). The data stored within this internal object is then reused during each subsequent sort action. A listing of sample sort times for a 100 row table can be located within the dynamic table creation demo. Sortable datatypes. Splintered Striper. Back in March 2004, David F. Miller demonstrated a little bit of DOM scripting magic in his A List Apart article Zebra Tables. His script programmatically adds two alternating CSS background colours to table rows, making them more readable and visually pleasing, while saving the document author the tedious task of manually assigning the styling to large static data tables.
Although David’s original script performs its duty well, it is nonetheless very specific and limited in its application. It only: works on a single table, identified by its id, with at least a single tbody section assigns a background colour allows two colours for odd and even rows acts on data cells, rather than rows, and then only if they have no class or background colour already defined Taking it further In a recent project I found myself needing to apply a striped effect to a medium sized unordered list. Being more general purpose, the function in my splintered striper experiment is necessarily more complex. Highlight table rows on mouse over. Tutorial: Ajax basics - Introduction Ajax is a great tool to create more dynamic web pages and enhance user interaction. With Ajax, we can contact our server from our Javascript code and get data from the server without having to reload the page. In this tutorial, we will see how to use Ajax in your Javascript code.
We will create a "dynamic content" script like the one you can download from the Ajax section on this site. We will use the SACK library in this script. You can download it from here. Ps! Let's start What we are going to create is a script that uses Ajax to populate DIV tags on our page with content from external files. The first thing we do is to create an empty html file. <! Notice that we refer to two Javascript files: js/ajax.js which is the library from twilightuniverse and js/ajax-dynamic-content.js which is a file we're going to create in this tutorial. We also need a couple of <DIV> tags on our page(A <DIV> tag is a block level element without any default styling). Javascript code Global variables. Why the CSS Table Gallery? What is this about? The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them. Basically the thread/email that gave me the idea was this request on the evolt list. Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering. There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go. Table and CSS tutorials May the following off-site resources give you wisdom and inspiration: Most blatantly stolen from Laura L.