CODEWITHSUNDEEP
javascripthtmldomclone
Nicholas Hazel
Nicholas Hazel

Reputation: 3740

Table, insert x cells inside with javascript function

GOAL:

Create a board with user number grid. CSS, HTML works when tested.

  1. Reproduce (x) with the length (and width for that matter) of the table.
  2. Create (x) rows and (x) columns in the table with this var x.

I know javascript inside and out... as far as math. Just point me in the right direction to create 3 TRs and 3 TDs inside of each TR at the same time in the DOM.

I've tried .clone, but I have been failing... any help is appreciated!

ORIGINAL JS:

function create(x){
    var board = [];
    for(var i=0;i<x;i++){
        var tempArr = [];
        for(var j=0;j<x;j++){ tempArr[j] = ""; }
        board.push(tempArr);
    }
    return board;
}
create(3);

FULL HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tic Tac Toe! (and more...)</title>
  <meta name="description" content="Tic Tac Toe">
  <meta name="author" content="SinSysOnline">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <style>
  body{
    font-family:"Lucida Console", Monaco, monospace;
  }
  td{
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    width:100px;
    height:100px;
    text-align:center;
    font-size:72px;
  }
  td:last-child{
    border-right:none;
    border-bottom:1px solid #000;
  }
  tr:last-child td{
    border-bottom:none;
  }
  </style>
</head>

<body>
<div id="dashboard">
    <input type="text" value="How large is your grid? (default 3)" size="35" />
</div>

<table id="board">
    <tr></tr>
</table>

<script>
(function($) {
    var $board = $('#board');
    var td = "<td></td>", $tr = $("<tr></tr>");
    function create(x) {
        $board.empty();
        var arr = [];
        for(var i = 0; i < x; i++) {
            arr.push(td);
        }
        var $trCloned = $tr.clone().append(arr.join(''));
        for(var j = 0; j < x; j++) {
            $board.append($trCloned);
        }
    }

    function compChoice(x){
        var a = Math.floor(Math.random(10)*x),
            b = Math.floor(Math.random(10)*x);
        while(board[a][b]!==""){
            a = Math.floor(Math.random(10)*x);
            b = Math.floor(Math.random(10)*x);
        }
        board[a][b]="X";
    }   

    function userChoice(a,b){
        var select = [a,b];
        if(board[a][b]!==""){
            alert("That's not a valid move... try again");
        } else { 
            board[a][b]="O"; 
        }
    }

    var x = prompt("How large would you like your grid? (3-10)");
    var board = create(x);
})(jQuery);
</script>
</body>
</html>

FULL JS:

(function($) {
var $board = $('#board');
var td = "<td></td>", $tr = $("<tr></tr>");
    function create(x) {
        $board.empty();
        var arr = [];
        for(var i = 0; i < x; i++) {
            arr.push(td);
        }
        var $trCloned = $tr.clone().append(arr.join(''));
        for(var j = 0; j < x; j++) {
            $board.append($trCloned);
        }
    }

    function compChoice(x){
        var a = Math.floor(Math.random(10)*x),
            b = Math.floor(Math.random(10)*x);
        while(board[a][b]!==""){
            a = Math.floor(Math.random(10)*x);
            b = Math.floor(Math.random(10)*x);
        }
        board[a][b]="X";
    }   

    function userChoice(a,b){
        var select = [a,b];
        if(board[a][b]!==""){
            alert("That's not a valid move... try again");
        } else { 
            board[a][b]="O"; 
        }
    }

    var x = prompt("How large would you like your grid? (3-10)");
    var board = create(x);
})(jQuery);

Upvotes: 0

Views: 646

Answers (1)

cwang
cwang

Reputation: 1104

using a nested loop would be much easier. Exmaple: http://jsfiddle.net/7qmdY/

$("#go").click(function(){
    var size = $("#size").attr("value");//get size value;
    for(var i=0;i < size;i++){// first loop to create row
        $("#board").append("<tr>");
        for(var j=0;j < size;j++){// nested loop to create column in all rows
            $("#board").append("<td>1</td>");
        }
        $("#board").append("</tr>");
    }
});

Upvotes: 1

Related Questions