Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Moving data in within a table

    Hello! I am new here and new to JavaScript. I am creating a basic game and I'm stumped on how to move data in cells on click of a button. I have a table with three columns and three rows. What I am trying to do is move data inside cell one to cell two, cell two to three, three to six, six to nine and so on. While keeping cell five stationary. Here is a look at my table in HTML. So essentially the outter cells keep moving around with the click of a button.

    <table border="1" id="cellMove">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    <input type="button" id="move" value="MOVE VALUE"/>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,686
    Thanks
    25
    Thanked 656 Times in 655 Posts
    In the code below I show you how to call a JS function (in blue) and the function with the moving of the first cell(red) and the top corner cell(green).
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <table border="1" id="cellMove">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    </table>
    <input type="button" id="move" value="MOVE VALUE" onclick="move();"/>
    
    <script type="text/javascript">
    
    function move(){
    	var cell2 = document.getElementById("cellMove").rows[0].cells[1].innerHTML;
    	var cell1 = document.getElementById("cellMove").rows[0].cells[0].innerHTML;
    	document.getElementById("cellMove").rows[0].cells[1].innerHTML = cell1;
    
    	var cell3 = document.getElementById("cellMove").rows[0].cells[2].innerHTML;
    	var cell6 = document.getElementById("cellMove").rows[1].cells[2].innerHTML;
    	document.getElementById("cellMove").rows[1].cells[2].innerHTML = cell3;
    }
    </script>
    </body>
    </html>
    See what you can do with this.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    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
    •