About this section
Host your HTML Pages on A2 Hosting
November 27, 2016
Share On Facebook

HTML 5 Editable Grid Example

Audience

This article is intended for an audience which has an understanding of HTTP, HTML(4/5) , javascript, AJAX, and CSS.

Topic, Scope & Devices

This article is intended as an example of how to build a HTML grid which can be edited in the browser and not as a step-by-step tutorial. We provide a general outline of how we went about building the grid only. Readers will need to examine the example code to get a full understanding of the example grid.

This example was written only for desktop devices and not for mobile devices. We did not test on mobile devices, but please feel free to give mobile a try. Keep in mind that mobile devices may not support editing of HTML elements and / or javascript which is required for this example to work.

Requirements

A desktop browser at or above the versions tested (listed below) in this example.
Javascript enabled browser
Access to the internet (for AJAX processing to work)
Note 1: Internet connection is not needed for anything but AJAX, however, the example may still be used "off-line" without an internet connection.
Note 2: The source code can be saved as a stand-alone .html file for use off-line if necessary.

Source Code License

The source code in this example is free to use for any purpose, however, article content is copyrighted and not included in the source code license. Any third-party source code or libraries belong to the content owners and not to axilbits. Please refer to the third-party for terms of use and licensing.

Constructs Covered

  1. HTML 5
  2. JavaScript - Closures
  3. JavaScript - Array - old and newer iterations (forEach vs for ...)
  4. Javascript - Table Sorting (HTML 5 Table)
  5. Javascript - How to dynamically insert rows into an HTML table using JavaScript
  6. Javascript - Unobtrusive Javascript (JS that is not attached directly to HTML elements in the HTML code).
  7. Javascript - Ternary operation
  8. CSS 3 - Advanced table properties
  9. Yahoo - APIs PURE

Project Information

This project is an actors list in the form of an editable and sortable grid where the data may be bundled into an AJAX call and processed. The user interface has the following basic functionality:

  • Sort: ASC/DESC: (Ascending / Descending) links to sort
  • Five (5) editable columns and one read-only "key" column.
  • Stationary and static; header and footer rows
  • Data Collection: AJAX example of how to collect edited data and process data.
  • CSS Dialog rendering of (success / fail ) of AJAX processing
  • Addition of rows was not implemented for this example.

Using the Example Interface

Enter, edit, remove and sort data. Once complete, click the "Process and Send AJAX Request" button and a JSON response will be written at the bottom of the page.

SCREEN SHOT: grid screen shot

How It Is Done

Here is what we did:

  1. Add row and cell attributes: HTML5 "contenteditable" and HTML5 "data-"
  2. Added javascript functions to iterate each row and read the contents of each cell
  3. Used "built-in" javascript JSON parser to make a JSON formatted object from our cell data
  4. Added a "result dialog" a javascript and CSS 3 driven dialog ("no jQuery")
    4 a. added CSS for the dialog
  5. Populated our results dialog list with the result of the JSON response
  6. Display packaged JSON data that was read, packaged, and processed via AJAX

Key Points

  • Dialog with only JS and CSS no JQUERY
  • Non-Form encoded POST / GET meaning NO < FORM >< / FORM> tag
  • JSON bundling of content using built-in JS feature
  • AJAX: How to iterate through html elements (non-input-elements) to collect data. In this case a table.

Javascript Notes:

Javascript, in this example, was split between top and bottom of page to help keep the example concepts as separate as possible. However, javascript was added to the main attribute settings for dynamically created rows and simply consists of creating attributes and assigning values no actual logic.

The javascript functions for collecting data and AJAX handling could be placed anywhere in the page where it remains in proper scope to be called successfully. The bottom was just an easy place to keep separated for readability.

Typically, javascript should not be placed in different locations (for similar functionality) within a page if possible. Additionally, the best way to implement javascript in this example would be to have a separate javascript file (or js-library) that would contain the javascript functionality. We wrote the example explicitly for demonstration (and learning) purposes only; so please don't "roast-us" for not doing it differently.

AJAX Mock-Up

The AJAX function is mocked to an echo service and the actual package of JSON data from the table is not sent but only echoed from the service as a JSON response. JSON data is displayed after the AJAX call is executed.

If a real server that accepted our data as POST was available we would simply change the following lines:

FROM ......
//Open and Send --- NOTE: content type must be set AFTER OPEN or ERROR if before.
xmlhttp.open("GET", "http://echo.jsontest.com/Message_1/JSON_Data_Packaged/Message_2/SUCCESS");
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send();//data_to_get

TO .........
//Open and Send --- NOTE: content type must be set AFTER OPEN or ERROR if before.
// changed verb, changed url
xmlhttp.open("POST", "http://URL_THAT_ACCPETS_JSON_DATA_AS_POST/");
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// data set as parameter to send
xmlhttp.send(data_to_get);

CSS 3 Advanced Notes (row coloring):

We have seen javascript functions use the Modulus operator such as:
if(i % 2 == 0) { rows[i].className = "even"; }
else { rows[i].className = "odd"; }

A much better way is to remove the javascript and instead use advanced CSS properties like this:
table tr:nth-child(even) td

Tested in FireFox 28, Safari 7.03 and Chrome 33.0.1750.146

Browser Testing:

Fail: Version IE 11.0.9600.16521CO (see fail notes and work-around)
Pass: Version FireFox 29.01 for OSX and Windows (CSS and JS behaves differently on windows)
Pass: Version: SAFARI 7.0.3
Pass: Versions: Chrome 33.0.1750.146 and "33.0.1750.146 m" for windows.

Internet Explorer Fail Notes:

  1. IE 11 does not respect the CSS rounding math; because it clobbers, the dialog, with scroll bars that do NOT overflow on other browser and looks bad. IE appears to not calculate dimensions or overflow the same as other operating systems.
  2. MS WINDOWS it-self handles Firefox and Chrome differently than OSX. Interestingly all work as expected on OSX visually.
  3. IE 11 does not respect the attribute "contenteditable" as described in the HTML 5 spec at this link
    QUOTE from SPEC:(Notice "ALL" in the last line of this quote.)
    " 5.2 The contenteditable attribute The contenteditable attribute is a common attribute. User agents must support this attribute on all HTML elements. "
    On the surface, it would appear, Microsoft does not support "contenteditable" on table cells < td > tags. The work-around for Internet Explorer is to use a span tag < span contenteditable=true > in each cell then IE works as expected. However, this creates extra work in the javascript; because you now have to get the child span of each < TD > element instead.

Exercises and TO-DOs

  1. Fix CSS to work correctly on Windows 7 & 8
    Note: Regardless of browser; CSS positioning math is handled differently by operating system which affects how CSS is rendered in the browser.
  2. Figure out why var the code row = row_body.insertRow(row_id) is an error on Windows
  3. Adjust CSS for grid to properly highlight the footer row.
  4. Exercise: Use Ajax to collect some data for initial display instead of the mocked table.
  5. Javascript closures:
    TODO: Figure out if the below assumptions are correct or not and adjust javascript accordingly. A function inside a closure should not execute until it is called as the assumption is:
    Closures (when executing) create all the objects first then execute functions as they are called inside of the closure. This behavior is different between operating systems. On Microsoft windows some of the enclosed functions appear to execute top down when the function is created before it is called. Meaning, the closure executes functions as they are created as opposed to called. Or more simply, assuming a function inside a closure only executes if it is actually called e.g. created but not called if there is no caller.
  6. TODO: Row Grouping
    Row grouping can be added by using multiple < TBODY > elements

References: