表中，使用javascript函数在其中插入x个单元格目标：创建具有用户编号网格的板。CSS、HTML在测试时可以工作。用表格的长度（和宽度）复制（x）使用此变量在表中创建（x）行和（x）列_Javascript_Html_Dom_Clone

表中，使用javascript函数在其中插入x个单元格目标：创建具有用户编号网格的板。CSS、HTML在测试时可以工作。用表格的长度（和宽度）复制（x）使用此变量在表中创建（x）行和（x）列

javascript html dom

表中，使用javascript函数在其中插入x个单元格目标：创建具有用户编号网格的板。CSS、HTML在测试时可以工作。用表格的长度（和宽度）复制（x）使用此变量在表中创建（x）行和（x）列,javascript,html,dom,clone,Javascript,Html,Dom,Clone,我对javascript了如指掌。。。至于数学。只要给我指出正确的方向，就可以在DOM中同时在每个TR内部创建3个TRs和3个TDs 我尝试了.clone，但一直失败。。。感谢您的帮助原创JS: function create(x){ var board = []; for(var i=0;i<x;i++){ var tempArr = []; for(var j=0;j<x;j++){ tempArr[j] = ""; }

我对javascript了如指掌。。。至于数学。只要给我指出正确的方向，就可以在DOM中同时在每个

TR

内部创建3个

TR

s和3个

TD

我尝试了

.clone

，但一直失败。。。感谢您的帮助

原创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);

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

(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);

函数创建（x）{
var board=[]；
对于（var i=0；i，使用嵌套循环会容易得多。
Exmaple：
$（“#go”）。单击（函数（）{
var size=$（“#size”）.attr（“value”）；//获取大小值；
对于（var i=0；i我的朋友，你就是男人！（或者女人，考虑到你名字中的“水晶”一词）我喜欢不符合我意图的解决方案，因此我可以相应地扩展和学习：-）再次感谢你！决定只使用一些动态创建的ID来解决问题。查看此处：
$("#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>");
    }
});