Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Update HTML table's text without refresh

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    ??? 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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

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

    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.)

    SO...

    You probably have to give us more details if you want help picking the best and/or easiest method.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Off the top of my head (truly! just typing this on the fly):
    Code:
    <html>
    <head>
    <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;
        }
    }
    </script>
    </head>
    <body>
    <table id="TBL" border="1" cellpadding="5">
    <tr><td>ONE</td><td>TWO</td><td>THREE</td></tr>
    <tr><td>1.11</td><td>2.22</td><td>3.33</td></tr>
    </table>
    <input type="button" value="LEFT" onclick="shift();"/>
    </body>
    </html>
    Okay, now I will go test it. After posting this.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    emfoote (09-01-2010)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    One typo.

    The line
    Code:
            cells[cell.length-1].innerHTML = temp;
    should be
    Code:
            cells[cells.length-1].innerHTML = temp;
    For a simple "effect" to prove that something really is happening, replace the line
    Code:
            var temp = cells[0].innerHTML;
    with this:
    Code:
            var temp2 = cells[0].innerHTML;
            var temp = "";
            for ( t = temp2.length-1; t >= 0; --t ) 
            {
                 temp += temp2.charAt(t);
            }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •