当我用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添加它。
如果您可以在.box
div中添加一个<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