View Full Version : Update HTML table's text without refresh

08-20-2010, 11:41 PM
Hello All,

I'm working on a project which requires a small portion from a large table of information to be displayed on a webpage (sort of like a magnifying glass). The display will be a table of fixed size (m by n cells).
Some of the cells will be merged. When the table updates, different sets of cells may be merged.

It needs to be coded in HTML5, which I assume includes the use of JavaScript and CSS (The specs of this is rather unclear at the moment, so I'm going to cover all bases).

Anyhow, looking through the HTML5 and JavaScript tutorials, I found two ways to solve this problem.
One way would be to have a script to parse out the relevant information, and have it output into a table (dynamically generating the HTML required).

The second way would be to have the script draw the table on its own in a canvas.

User events (such as arrow keys on the keyboard) will change the position of the focus (move the magnifying glass in a cardinal direction).

I hit a small snag with the first solution -
Is it possible to update the table on the page (including changing the structure of it) without having to refresh?

If you could point me to a relevant tutorial or example on the web, I'd greatly appreciate it.

Old Pedant
08-20-2010, 11:56 PM
??? I don't see the difference between your two approaches???

Or are you saying that in the first scheme you would *NOT* have the underlying table present?? Clearly possible, but wouldn't it be confusing to the user??

But in any case:

Is it possible to update the table on the page (including changing the structure of it) without having to refresh?
Of course.

But I think we need more details to undertand what "parse out the relevant information" means here.

08-21-2010, 02:21 AM
The difference between generating the HTML table and drawing to a canvas is the former will be able to use CSS and the later will end up being a graphic. Both have the same approach until displaying the information.

To be more specific, the first could invoke document.write(), where the second might be more along the lines of

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

As far as parsing out relevant information - imagine if you had a day planner online. Scheduled appointments would be blocks of time. You might want to view one day, then flip to the next. A cell of the table would represent at minimum 15 minutes.

Old Pedant
08-21-2010, 02:35 AM
Oh, sorry. I was thinking of "canvas" in the generic way, not as a graphic canvas.

*CLEARLY* you want to use HTML.

But you do *NOT* want to use document.write().

If you use document.write() at any time after a page is fully loaded (that is, at any time after <body onload=xxx> would invoke that xxx code), then you will WIPE OUT *ALL* HTML on the page, *including* all JavaScript!

You need to manipulate the content either by changing the innerHTML of some object (works, but considered obsolescent) or by using DOM methods (e.g, removeChild, createElement, et al.).

You *CAN* also create huge <table>s and then just hide all but some small set of cells. You can do that either by changing the display style of to-be-hidden cells to "none" (and then back to "", to get the default display) or you could put the table inside a <div>, ask that all content outside the fixed size of the <div> be "clipped" (hidden), and then move the content relative to the div so as to make portions of it appear.

So probably too many possibilities. Up to you.

As another (simpler) alternative, if the sizes of the cells don't need to change as the user scrolls around, then you could just do it via innerHTML to change only the *text* inside each cell, and that's not a bad thing to do. (Not so good to change DOM content via innerHTML, but just changing text is fine.)


You probably have to give us more details if you want help picking the best and/or easiest method.

08-21-2010, 06:52 AM
As I said in the OP, the specs of this are unclear at the moment, so I'll probably end up doing both the "painting" graphical method and the "generating" HTML method (they both share a root of the problem, and the only difference then is the display. Also, I have a bit of Java programming experience and JavaScript reminds me of a lot of it).

The day planner example is close enough to what I need, and in my humble opinion is easier to understand and to describe.

The amount of information in this day planner is huge, and the device its meant to run on isn't all too fast.

Are the DOM methods able to change the HTML content of a page after its been loaded, and does the browser need to be refreshed afterward?
Do you have any examples/tutorials of this handy?

Thanks for the help.

Old Pedant
08-22-2010, 03:05 AM
Off the top of my head (truly! just typing this on the fly):

<script type="text/javascript">
function shift( )
var tbl = document.getElementById("TBL");
var rows = tbl.getElementsByTagName("tr");
for ( var r = 0; r < rows.length; ++r )
var cells = rows[r].getElementsByTagName("td");
var temp = cells[0].innerHTML;
for ( var c = 0; c < cells.length-1; ++c )
cells[c].innerHTML = cells[c+1].innerHTML;
cells[cell.length-1].innerHTML = temp;
<table id="TBL" border="1" cellpadding="5">
<input type="button" value="LEFT" onclick="shift();"/>

Okay, now I will go test it. After posting this.

Old Pedant
08-22-2010, 03:12 AM
One typo.

The line

cells[cell.length-1].innerHTML = temp;

should be

cells[cells.length-1].innerHTML = temp;

For a simple "effect" to prove that something really is happening, replace the line

var temp = cells[0].innerHTML;

with this:

var temp2 = cells[0].innerHTML;
var temp = "";
for ( t = temp2.length-1; t >= 0; --t )
temp += temp2.charAt(t);

Old Pedant
08-22-2010, 03:18 AM
But you can also do *MUCH* more complex things. Basically, any content you write with HTML you can create with JavaScript. And then some.

You can use document.createElement( ...any tag name...) to create any HTML element on the fly. You can fill in all its properties on the fly. You can attach that new object as a child of most any other element (which can be use to determine its position, if it wasn't given absolute position). And much more.