javascript - 创建二维动态表时分隔行和列

Question

当我用 jquery 创建一个二维表时，我无法分隔行和列 td。

如何创建 10 行 10 列 2d 表：

到目前为止我做了什么：

$(document).ready(function () {
    for (var i = 1; i <= 10; i++) {
        $('.box').append('<td/>' + '</p>');
        for (var j = 1; j <= 10; j++); {
            $('.box').append('<td/>');
        }
    }
});

http://jsfiddle.net/VS37n/

提前谢谢！

Answer 1

您需要一个有 10 列和 10 行的表。

var rows = 10;
var cols = 10;

在 HTML 表结构中，行在层次结构中排在首位，因此，首先创建这些行：

$(document).ready(function() {
    var rows = 10;
    var cols = 10;
    var box = $('.box');

    for (var r = 0; r < rows; r++) {
        var tr = $('<tr>');
        //Here we will append the columns to the row before appending it to the box.
        box.append(tr);
    }
});

上面的代码只为我们做了 10 行。现在我们需要为每一行添加 10 列：

$(document).ready(function() {
    var rows = 10;
    var cols = 10;
    var box = $('.box');

    for (var r = 0; r < rows; r++) {
        var tr = $('<tr>');

        for (var c = 0; c < cols; c++) {
            tr.append($('<td><p></p></td>')); //Create the table cell, with a p element as in your example, and append it to the row.
        }

        box.append(tr);
    }
});

看到这个小提琴

更新

我刚刚注意到您帖子中的 jQuery 选择器选择了<div>带有 class 的元素.box。但是，您希望将这些行和列添加到<table>不存在的元素中。我建议您<table>在 HTML 中添加一个元素，或者在添加行之前使用 Javascript 添加它。

如果您可以<table>在 div 中添加一个元素.box，那么您只需更改以下行：

var box = $('.box');

至：

var box = $('.box table:first');

如果由于某种原因无法更改 HTML，则可以在行和列之前动态创建表：

var box = $('<table>').appendTo('.box');

Answer 2

你有一个;after 你的for循环：

for (var j = 1; j <= 10; j++); {
    $('.box').append('<td/>');
}

此外，您没有添加<tr>元素。

查看更新的小提琴

Answer 3

这是你想要做的吗？

$(document).ready(function () {
  var tdHtml = "":
  var trHtml = "";
  var tableHtml = "";
  for(var i=1;i<=10;i++)
  {
     tdHtml += "<td></td>";
  }
  for(var j=1;j<=10;j++);
  {
     trHtml += ("<tr>" + tdHtml + "</tr>");
  }
  tableHtml = ("<table>" + trHtml + "</table>");
  $('.box').innerHtml(tableHtml);
});