Results 1 to 8 of 8
  1. #1
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript to insert into table

    Hi all,
    I'm a beginner JS programmer and need to know how to insert calculated data (done on form submit), to fields in a table. This table contains the output of a bunch of calculations that are done when the user presses a [Calculate] button on my form. Right now I have it working fine (by displaying the output table in a pop-up window) but it's been decided to write the output data to the same html page. This output table would show up below the input form (the one with the [Calculate] button) Like this (fake code, just to make it more clear):
    <pre><html>
    <form 'input form'>
    <table INPUT>
    <rows and cols of data>
    </table>
    [Calculate] button

    <table OUTPUT>
    <row 1><cell 1><cell 2><cell 3>
    <row 2><cell 1><cell 2><cell 3>
    <row 3><cell 1><cell 2><cell 3>
    <row 4><cell 1><cell 2><cell 3>
    <row 5><cell 1><cell 2><cell 3>
    </table>
    </form>
    </html></pre>

    So when the [Calculate] button is clicked, the onClick() code is run and takes the user's form data. This generated data then needs to get populated in the ouptut table (2nd table displayed).

    How do I tell JS to drop a given set of data in field 'row 2, cell 3'? <img src=/S/brickwall.gif border=0 alt=brickwall width=25 height=15>

    I'm guessing it's some offset of objects into the named table but I can't get the syntax right.

    Also, is there a way to hide this entire table from the user until they hit the [Calculate] button?
    (ah, if this was Perl, I'd be long done by now, but I know very little about the JS object). <img src=/S/sigh.gif border=0 alt=sigh width=15 height=15>

    Thnx, Deb <img src=/S/compute.gif border=0 alt=compute width=40 height=20>

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: JavaScript to insert into table

    Can I skip to the second question? There is a STYLE setting named DISPLAY that you can use to show or hide a "chunk" of a document. And you can toggle it visible or invisible using script. A page in an archived folder on our web site demonstrates how to do this in both IE4 and NS6 syntax ('though NS6 users reported problems with the arrows not changing directions): old FAQ You might want to download it, as there's no assurance as to how long it will be there.

    Another example is attached. In this case, you click a "teaser" message and the full text is displayed. You can't toggle back. (I was too lazy to take away the "hand" icon...)

    As for the first question, it's a bit difficult to write "nondestructively" to the document on screen. If you dig deeply in the DOM (document object model), you will see that you can work with the "innerHTML" or "innerText" if almost any element that has open and close tags. Therefore, at least in theory, you could write to the innerText of each cell. How exactly you can reference each cell without the hassle of having to assign an ID to each one will take some work to figure out. In this thread on the IE board, patt has been exploring how to read data out of tables. Perhaps he has developed a technique that you can adapt.

    Hope this helps.
    Attached Files Attached Files

  3. #3
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: JavaScript to insert into table

    Thanks for all the great detail. <img src=/S/bravo.gif border=0 alt=bravo width=16 height=30> I'm not surprised the answer is mostly no. I'm used to doing dynamic pages in Perl so was skeptical that this would work in JS. Part of the reason the folks here didn't want the pop-up window is the common use of pop-up blockers. I can re-write this in Perl easily enough but the deployment process of uploading and managing a web app at my company is much more controlled (for good reason) than it is for a static web page. I was trying to avoid that longer process.

    I'll read through the info you gave me more thoroughly but to save time, I'll probably just go back to the pop-up window version to display the results.

    Thnx, Deb <img src=/S/cool.gif border=0 alt=cool width=15 height=15>

  4. #4
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: JavaScript to insert into table

    Here's a simple example in JavaScript. As noted above, instead of filling the DIV, you'd be targeting the cells of the table:

    <html>
    <head>
    <title>Input to Div Demo</title>
    <script>
    function writeIt(strSource, strDestination)
    {
    //Compatible with IE5+ and NS6+
    var myText = document.getElementById(strSource);
    var myDIV = document.getElementById(strDestination);
    myDIV.innerText = myText.value;
    }
    </script>
    <head>
    <body>
    <form>


    Put something into the box and click the button!</p>
    <input type="text" id="input1"> <input type="button" value="Show me" onClick="writeIt('input1', 'div1');">
    </form>
    <hr>
    <div id="div1"> </div>
    </body>
    </html>

  5. #5
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: JavaScript to insert into table

    Oh hey, I found a good code example for you on this page:
    MSDN Home > MSDN Library > HTML and Dynamic HTML > Reference > Collections > rows Collection

    So I've attached a more relevant demo. <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Attached Files Attached Files

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: JavaScript to insert into table

    Here's a second demo page which is a bit more sophisticated. Ugly it is, but the code is more interesting.
    Attached Files Attached Files

  7. #7
    5 Star Lounger jujuraf's Avatar
    Join Date
    Jun 2001
    Location
    San Jose, California, USA
    Posts
    1,061
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: JavaScript to insert into table

    Thanks for the info. To answer your question about if I planned on returning to the server on Submit and the answer is No since I was hoping to just use JavaScript and not re-write it all in Perl (which is the only way I know how to do this page with code that sits on the server and not on the client side).

    The link you provided was to a post that I submited on this same question! I didn't remember asking this question before, jeeesh, what a dweeb I am! <img src=/S/bash.gif border=0 alt=bash width=35 height=39>

    I understand what you mean about JS writing non-destructively and the MS code in the other link looks like it reads from an existing table instead of creating a new one. How about if I let the user do Submit 5 times and I initially create 5 empty tables which then get written to by JS?

    I'm beginning to think this will work better if I just re-write it in Perl. <img src=/S/bummer.gif border=0 alt=bummer width=15 height=15>

    Thanks for you guidance.
    Deb

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: JavaScript to insert into table

    I think you will enjoy it more doing it server side, but if it has to be client-side, it's very do-able. Take a look at my post above from today to see how to add and populate a table, as well as the MS article listed in <post#=328525>post 328525</post#>. That article shows both a tradition "write-as-you-go" method as well as a more recordset-like approach of populating the table in memory and then dropping it into the page. The latter approach has the advantage that it's more likely to work in non-Microsoft browsers because it's more W3C compliant. At least, it seemed that way from a quick read-through.

Posting Permissions

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