Question

我无法将行和列td分开，因为我使用jquery创建了一个2d表。

如何创建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/

提前thnx！

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

请参阅此FIDDLE

<强>更新

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

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

var box = $('.box');

为：

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

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

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

Answer 2

这是你想要做的吗？

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

Answer 3

;循环之后你有一个for：

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

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

请参阅updated fiddle

创建2d动态表时分隔行和列

3 个答案: