Displaying a table with inner HTML

Discussion in 'Javascript' started by Cogito, May 5, 2007.

  1. Cogito

    Cogito Guest

    My program builds several tables using inner HTML. All the tables are
    displayed only when the program terminates. How can I make it display
    one table at a time and then wait for a click before displaying the
    next table?
    Cogito, May 5, 2007
    #1
    1. Advertising

  2. Cogito

    Evertjan. Guest

    Cogito wrote on 05 mei 2007 in comp.lang.javascript:

    > My program builds several tables using inner HTML. All the tables are
    > displayed only when the program terminates. How can I make it display
    > one table at a time and then wait for a click before displaying the
    > next table?
    >


    Show the shorest working code bits of your code.

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., May 5, 2007
    #2
    1. Advertising

  3. Cogito

    ASM Guest

    Cogito a écrit :
    > My program builds several tables using inner HTML. All the tables are
    > displayed only when the program terminates. How can I make it display
    > one table at a time and then wait for a click before displaying the
    > next table?


    try to innerHTML each table at its time in same div, no ?




    <html>
    <script type="text/javascript">
    function showHide(what) {
    while(what.tagName != 'DIV') what = what.parentNode;
    var next = what.id.substring(1)*1+1;
    what.className = 'hid';
    document.getElementById('d'+next).className = '';
    }
    onload = function() {
    document.getElementById('d1').className = '';
    }
    </script>
    <style type="text/css">
    div, table, td { border: 1px solid;}
    div.hid { display: none; }
    </style>
    <div id="d1" class="hid">
    <table><tr><td>1</td></tr></table>
    <button onclick="showHide(this);">Next</button>
    </div>
    <div id="d2" class="hid">
    <table><tr><td>2</td></tr></table>
    <button onclick="showHide(this);">Next</button>
    </div>
    <div id="d3" class="hid">
    <table><tr><td>3</td></tr></table>
    <button onclick="showHide(this);">Next</button>
    </div>
    <div id="d4" class="hid">
    <table><tr><td>4</td></tr></table>
    <button onclick="showHide(this);">Next</button>
    </div>
    </html>

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    ASM, May 5, 2007
    #3
  4. Cogito

    Cogito Guest

    On 05 May 2007 08:28:56 GMT, "Evertjan."
    <> wrote:

    >Cogito wrote on 05 mei 2007 in comp.lang.javascript:
    >
    >> My program builds several tables using inner HTML. All the tables are
    >> displayed only when the program terminates. How can I make it display
    >> one table at a time and then wait for a click before displaying the
    >> next table?
    >>

    >
    >Show the shorest working code bits of your code.


    My program solves the "8 Queens problem" (Place 8 queens on chessboard
    such that no two attack one another).

    The program can be found in the following URL:
    http://users.bigpond.net.au/blackbox/8_queens.html

    The program works as I designed it. It calculates all solutions at
    once. I would like to create another version that displays the first
    solution then waits for a click before calculating the second solution
    and displaying it on top of the previous solution, i.e., replacing the
    previous solution, and so on. I'm not quite sure how to force it to
    display something before completion. Ideally, I would like to force a
    display of the just calculated solution in the "display" function.

    The entire program is my original code except for the inner HTML
    method of creating a dynamic table which I have seen in another web
    program and emulated. I'm not quite sure how it works and what
    stuff.innerHTML+= board;
    does.
    Cogito, May 5, 2007
    #4
  5. Cogito

    Evertjan. Guest

    Cogito wrote on 06 mei 2007 in comp.lang.javascript:

    > On 05 May 2007 08:28:56 GMT, "Evertjan."
    > <> wrote:
    >
    >>Cogito wrote on 05 mei 2007 in comp.lang.javascript:
    >>
    >>> My program builds several tables using inner HTML. All the tables are
    >>> displayed only when the program terminates. How can I make it display
    >>> one table at a time and then wait for a click before displaying the
    >>> next table?
    >>>

    >>
    >>Show the shorest working code bits of your code.

    >
    > My program solves the "8 Queens problem" (Place 8 queens on chessboard
    > such that no two attack one another).
    >
    > The program can be found in the following URL:
    > http://users.bigpond.net.au/blackbox/8_queens.html
    >
    > The program works as I designed it. It calculates all solutions at
    > once. I would like to create another version that displays the first
    > solution then waits for a click before calculating the second solution
    > and displaying it on top of the previous solution, i.e., replacing the
    > previous solution, and so on. I'm not quite sure how to force it to
    > display something before completion. Ideally, I would like to force a
    > display of the just calculated solution in the "display" function.
    >
    > The entire program is my original code except for the inner HTML
    > method of creating a dynamic table which I have seen in another web
    > program and emulated. I'm not quite sure how it works and what
    > stuff.innerHTML+= board;
    > does.
    >


    Why not make a piece of code that shows the problem you are having.

    That surely could be done?

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., May 5, 2007
    #5
  6. Cogito

    Cogito Guest

    On 05 May 2007 08:28:56 GMT, "Evertjan."
    <> wrote:

    >Cogito wrote on 05 mei 2007 in comp.lang.javascript:
    >
    >> My program builds several tables using inner HTML. All the tables are
    >> displayed only when the program terminates. How can I make it display
    >> one table at a time and then wait for a click before displaying the
    >> next table?
    >>

    >
    >Show the shorest working code bits of your code.


    Forgot to mention, The program takes some time to calculate all
    solutions so please be patient and give it some time...
    Cogito, May 5, 2007
    #6
  7. Cogito

    -Lost Guest

    Cogito wrote:

    > The entire program is my original code except for the inner HTML
    > method of creating a dynamic table which I have seen in another web
    > program and emulated. I'm not quite sure how it works and what
    > stuff.innerHTML+= board;
    > does.


    Assuming "stuff" is a valid reference to an element, it would assign the
    innerHTML plus whatever value "board" has, to the innerHTML of "stuff."

    --
    -Lost
    Remove the extra words to reply by e-mail. Don't e-mail me. I am
    kidding. No I am not.
    -Lost, May 6, 2007
    #7
  8. Cogito

    Evertjan. Guest

    Cogito wrote on 06 mei 2007 in comp.lang.javascript:

    > On 05 May 2007 08:28:56 GMT, "Evertjan."
    > <> wrote:
    >
    >>Cogito wrote on 05 mei 2007 in comp.lang.javascript:
    >>
    >>> My program builds several tables using inner HTML. All the tables are
    >>> displayed only when the program terminates. How can I make it display
    >>> one table at a time and then wait for a click before displaying the
    >>> next table?
    >>>

    >>
    >>Show the shorest working code bits of your code.

    >
    > Forgot to mention, The program takes some time to calculate all
    > solutions so please be patient and give it some time...


    If you stipulate my "shorest" ment "shortest"
    that is not a response to my suggestion.


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., May 6, 2007
    #8
  9. Cogito

    Cogito Guest

    On Sun, 06 May 2007 00:38:43 +0200, ASM
    <> wrote:

    >Cogito a écrit :
    >> My program builds several tables using inner HTML. All the tables are
    >> displayed only when the program terminates. How can I make it display
    >> one table at a time and then wait for a click before displaying the
    >> next table?

    >
    >try to innerHTML each table at its time in same div, no ?
    >
    >
    >
    >
    ><html>
    ><script type="text/javascript">
    >function showHide(what) {
    >while(what.tagName != 'DIV') what = what.parentNode;
    >var next = what.id.substring(1)*1+1;
    >what.className = 'hid';
    >document.getElementById('d'+next).className = '';
    >}
    >onload = function() {
    > document.getElementById('d1').className = '';
    > }
    ></script>
    ><style type="text/css">
    >div, table, td { border: 1px solid;}
    >div.hid { display: none; }
    ></style>
    ><div id="d1" class="hid">
    > <table><tr><td>1</td></tr></table>
    > <button onclick="showHide(this);">Next</button>
    ></div>
    ><div id="d2" class="hid">
    > <table><tr><td>2</td></tr></table>
    > <button onclick="showHide(this);">Next</button>
    ></div>
    ><div id="d3" class="hid">
    > <table><tr><td>3</td></tr></table>
    > <button onclick="showHide(this);">Next</button>
    ></div>
    ><div id="d4" class="hid">
    > <table><tr><td>4</td></tr></table>
    > <button onclick="showHide(this);">Next</button>
    ></div>
    ></html>


    Looks good, thanks. I will have a go at incorporating this method into
    my program to see if it does the trick for me.
    Cogito, May 6, 2007
    #9
  10. Cogito wrote:
    > My program builds several tables using inner HTML. All the tables are
    > displayed only when the program terminates. How can I make it display
    > one table at a time and then wait for a click before displaying the
    > next table?


    Being as you can't pause javascript, try changing your solve() function to take two parameters: (startRow, startCol)

    Then change

    display (solution);

    to
    display(solution, resumeStartRow, resumeStartCol);
    return;

    Having calculated where to take up calculations.

    In display()

    output the grid, and a button below it who's onclick method consists of a call to solve passing the resume row and resume column.
    TheBagbournes, May 6, 2007
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. phl
    Replies:
    2
    Views:
    1,928
  2. phl
    Replies:
    1
    Views:
    4,328
    Martin Jay
    Jun 8, 2006
  3. Carlo v. Dango
    Replies:
    14
    Views:
    1,010
    Alex Martelli
    Oct 19, 2003
  4. Pyenos
    Replies:
    2
    Views:
    375
    Pyenos
    Dec 27, 2006
  5. Sameer
    Replies:
    1
    Views:
    753
Loading...

Share This Page