表格，使用 javascript 函数在其中插入 x 个单元格答案

【问题标题】：Table, insert x cells inside with javascript function表格，使用 javascript 函数在其中插入 x 个单元格
【发布时间】：2014-01-20 15:57:52
【问题描述】：

目标：

创建一个带有用户编号网格的板。 CSS、HTML 在测试时有效。

用表格的长度（和宽度）复制(x)。
使用此 var x 在表中创建 (x) 行和 (x) 列。

我对 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] = ""; }
        board.push(tempArr);
    }
    return board;
}
create(3);

完整的 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>

完整的 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);

【问题讨论】：

标签： javascript html dom clone

【解决方案1】：

使用嵌套循环会容易得多。示例：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>");
    }
});

【讨论】：

你，我的朋友，是男人！（或女人，考虑到你名字中的水晶这个词）
我喜欢不符合我预期的解决方案，因此我可以相应地扩展和学习 :-) 再次感谢您！
决定只使用一些动态创建的ID来解决问题。在这里查看：JS Fiddle