www.webdeveloper.com
Results 1 to 9 of 9

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

  1. #1
    Join Date
    Aug 2012
    Posts
    12

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

    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

    <script type="text/javascript">
    document.writeln ("<table border=2 bgcolor=white cellpadding=2 cellspacing=0><tr><td>");
    document.writeln ("<table border=0 bgcolor=white cols=8 cellpadding=0 cellspacing=0>");
    for (var i=1; i<=nrows; i++)
    {document.writeln ("<tr align=center>");
    for (var j=1; j<=ncols; j++)
    {document.writeln ("<td><img src="+PickImg(i,j)+IfClick(i,j)+"></td>"); }
    document.writeln ("</tr>");
    }
    document.writeln ("</table></td></tr></table>");
    }
    </script>

    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?

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,263

    Exclamation

    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.
    Last edited by JMRKER; 08-17-2012 at 07:08 PM.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,263

    Lightbulb

    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.
    Code:
    <!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!

  4. #4
    Join Date
    Aug 2012
    Posts
    12
    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

    Code:
    <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>

  5. #5
    Join Date
    Aug 2012
    Posts
    12
    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
    Code:
    document.getElementById("r3c5").src = "xx.bmp";
    Unfortunately this would require a massive block of code
    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
    Code:
    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
    Code:
    document.getElementById(row*20+col).src = image;
    I will have to do more experiments.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,263

    Question

    Quote Originally Posted by contestcen View Post
    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?

  7. #7
    Join Date
    Aug 2012
    Posts
    12
    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
    Code:
    document.getElementById("r"+r1+"c"+c).src = image;
    and it is working fine.

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

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,263

    Exclamation

    Quote Originally Posted by contestcen View Post
    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
    Code:
    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)

  9. #9
    Join Date
    Aug 2012
    Posts
    12
    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.
    Last edited by contestcen; 08-18-2012 at 10:59 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles