Displaying a table with inner HTML

C

Cogito

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?
 
E

Evertjan.

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?
Click to expand...

Show the shorest working code bits of your code.
 
A

ASM

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?
Click to expand...

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>
 
C

Cogito

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


Show the shorest working code bits of your code.
Click to expand...

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.
 
E

Evertjan.

Cogito wrote on 06 mei 2007 in comp.lang.javascript:
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.
Click to expand...

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

That surely could be done?
 
C

Cogito

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


Show the shorest working code bits of your code.
Click to expand...

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

-Lost

Cogito said:
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.
Click to expand...

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

Evertjan.

Cogito wrote on 06 mei 2007 in comp.lang.javascript:
Forgot to mention, The program takes some time to calculate all
solutions so please be patient and give it some time...
Click to expand...

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

Cogito

Cogito a écrit :

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>
Click to expand...

Looks good, thanks. I will have a go at incorporating this method into
my program to see if it does the trick for me.
 
T

TheBagbournes

Cogito said:
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?
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

HTML Table Issue 1
Only one table shows up with the information 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to add dropdown selected data to table using jquery 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Stuck with html and css 25
Need total amount displayed of data-price attribute from each table 2
Problem with displaying character that code number is 219 (after SetConsoleTextAttribute)? 3

Members online

No members online now.
Total: 30 (members: 3, guests: 27)
Robots: 195

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top