How to refresh or redraw a table when the cell contents change

This site is best viewed in a modern browser with JavaScript enabled.

How to refresh or redraw a table when the cell contents change

contestcen

I have been trying to program a puzzle webpage in JavaScript. Basically, each puzzle is a table with a different image in each cell. When the user clicks on an image, one or more of the images may change. Here is the code that I have in the body of the webpage

The function PickImg chooses the image that will be displayed in each cell. The function IfClick decides if the image should be clickable by the user. Nrows and Ncols give the numbers of rows and columns. I have verified that these are operating correctly

I've got this working in the code. That is, the source for each image is set correctly in the generated HTML code. But nothing happens on the screen. No matter how many times I change the contents of the cells, the image on the screen stays the same. I want the table to be redrawn when the contents of any cell(s) change. (All images are the same size.)

Is there any way to tell the browser that the table should be redrawn? Is there any place where I could find the answer?

JMRKER

It won't work so long as you use document.writeln statements to create the page.
The page reloads to the original display when you try to make the change.

Provide a link to your images and we can see if something can be changed to achieve the effect you want.

Also show what the function IfClick(i,j) is supposed to do.

BTW: You should enclose your script between [ code] and [ /code] tags (without the spaces)
to make it easier to spot, copy and test your code by other forum members.

JMRKER

Without knowing what the IfClick function is supposed to do,
I just put an alert message into this template of code
you could modify further.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title> Untitled </title>

<style type="text/css">
 .pics { height:100px;  width:100px; border:1px solid blue; margin:1px 4px; }
</style>

</head>
<body>
<div id="tbl"></div>

<script type="text/javascript">

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var PickImg = [
  ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'],
  ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'],
  ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'],
  ['41.jpg','42.jpg','43.jpg','44.jpg','45.jpg'],
  ['51.jpg','52.jpg','53.jpg','54.jpg','55.jpg']
];

var str = "";
for (var i=0; i<PickImg.length; i++) {
  str +="\n";
  for (var j=0; j<PickImg[i].length; j++) {
    str += "<img src='"+baseURL+PickImg[i][j]+"' class='pics' onclick='alert(this.src)'>";
  }
  str += "\n<br>";
}
document.getElementById('tbl').innerHTML = str;

</script>
</body>
</html>

Have fun!

contestcen

Thank you.

I tried your trick of making the entire specification for the table into one giant string, and then inserted the string inside a DIV /DIV in the body of the page. The table got built correctly, in the right spot, and the correct images were clickable. However, the results were still the same. The table stayed the same when I changed the images.

FYI, the IfClick function generates a string, such as onclick=someFunction(i,j) if the image in that cell is clickable, otherwise it returns an empty string.

Maybe it would help to know more about how PickImg works. I have an array called grid where each element is a code for the image that I want in each cell of the table. Then PickImg converts each code into the corresponding image name, like this

<script type="text/javascript">
  function  PickImg (row,col) 
  {switch (grid[row][col])    

    {case nul:                

       return "bl.bmp";       

       break;                 

     case dot:                

       return "y0.bmp";       

       break;                 

     case hl:                 

       return "yh.bmp";       

       break;                 

     case vl:                 

       return "yv.bmp";       

       break;                 

     default:                 

       return "yf.bmp";       

    }                         

  }                           

</script>

contestcen

There is a heavy-handed approach that I know will work, but the effort is huge, and the extra code would increase the loading time for the page. The idea would be to give every cell in the table an ID, like id="r12c1", id="r1c2" and so forth. Then when I want to change the contents of say cell r3c5 I would write

document.getElementById("r3c5").src = "xx.bmp";

Unfortunately this would require a massive block of code

function ChangeCell (image)  {
if  (row==1 && col==1)
  {document.getElementById("r1c1").src = image;} 
if  (row==1 && col==2)
  {document.getElementById("r1c2").src = image;}
...
if  (row==20 && col==20)
  {document.getElementById("r20c20").src = image;} 
}

unless there were some trick like

document.getElementById("r"+row+"c"+col).src = image;

It would be nice if that actually worked. Perhaps numeric ID's are possible, so you could do

document.getElementById(row*20+col).src = image;

I will have to do more experiments.

JMRKER

contestcen;1218407 wrote:
Thank you.

I tried your trick of making the entire specification for the table into one giant string, and then inserted the string inside a DIV /DIV in the body of the page. The table got built correctly, in the right spot, and the correct images were clickable. However, the results were still the same. The table stayed the same when I changed the images.

Of course it stayed the same ... The onclick only calls an alert message

Is the action to be to change the image of the cell clicked?

If yes, what image is to be used?

contestcen

Your onclick function calls an alert message; my onclick function regenerates the entire table.

No matter. I tried the trick of giving every cell in the table an id of the form "r"+row+"c"+col and changing the contents of each cell by

document.getElementById("r"+r1+"c"+c).src = image;

and it is working fine.

So I am past the roadblock. Thanks to everyone who helped.

JMRKER

contestcen;1218439 wrote:
Your onclick function calls an alert message; my onclick function regenerates the entire table.

No matter. I tried the trick of giving every cell in the table an id of the form "r"+row+"c"+col and changing the contents of each cell by
document.getElementById("r"+r1+"c"+c).src = image; 
and it is working fine.

So I am past the roadblock. Thanks to everyone who helped.

You still never indicate what you wanted the cell content to change to

Do you have a live example of what it is that you are trying to do
or a sample of the code you are using?
There might be a better way still to accomplish whatever you want to do
(which is still unclear to me)

contestcen

I have several different types of puzzles at sumsumpuzzle.com Eventually I want to make all of them interactive. I am starting with the Yashi puzzle because that seems the simplest. Hopefully it is a good one to learn with, and the lessons will carry over to the more complicated puzzles.

You (the player) start with a set of dots, and you draw lines to connect them. So the cells change from blank to line characters, (and back, if you erase a line), and the dots change according to where the lines impinge.

Now that I have gotten the updated images to show, I have essentially the same problem with cursor style and clickability. Even though I change the onclick attribute, and the style.cursor attribute, the page stays fixed. A cell that was not clickable at the start remains unclickable, and the cursor style stays an arrow, even though I specify a pointer (hand) at a later time.

However, this problem has an easy workaround. I can make every cell clickable right from the start, and just do nothing when the user clicks a blank cell.