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

Separate rows and columns while creating 2d dynamic table

本文关键字：隔行 动态 二维 创建      更新时间：2023-09-26

当我用jquery创建一个2d表时，我无法分离行和列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/

提前thnx！

您想要一个有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选择器选择了类为.box的<div>元素。但是，您希望将这些行和列添加到不存在的<table>元素中。我建议您在HTML中添加一个<table>元素，或者在添加行之前使用Javascript添加它。

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

var box = $('.box');

至：

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

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

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

这就是您想要做的吗？

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

在for循环后有一个;：

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

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

请参阅更新的fiddle

相关文章：