Question

我有一个方法，我动态创建一个表并将其分配给一个局部变量：

 var content = $('<table id="gvCapitalByYear" cellspacing="0"
       cellpadding="2"/>').append('<tbody/>');

然后我有一个循环，用于向上面创建的表添加行。但我无论如何都不能完成这件事。我尝试了以下方法：

content=$('#gvCapitalByYear').find('tbody').append('<tr/>');

但它不起作用，因为在我看来，一个id为“gvCapitalByYear”的元素没有附加到任何地方，它只是在运行中创建并保存在变量中。是否有可能以某种方式使用内容变量获取动态创建的表，添加一定数量的行并再次将其重新分配给内容变量？

Answer 1

您需要使用content变量而不是查询这些元素的DOM（例如$('#gvCapitalByYear')），因为内容尚未附加到DOM。

将表HTML包装为jQuery对象后，您可以像查询任何其他jQuery对象一样查询和操作它。该对象是“实时”的，因此您在添加更多内容后无需重新分配content变量。

var content = $('<table id="gvCapitalByYear" cellspacing="0" cellpadding="2"><tbody></tbody></table>');
//later, add as many rows as you like
content.find('tbody').append('<tr><td>Some Content Here</td></tr>');

此外，table，tbody和tr元素不是自动关闭标记，您需要为每个元素设置一个开始标记和结束标记，以使其成为有效的HTML

<强> Working Demo

Answer 2

试试这个

$('body').append('<table id="gvCapitalByYear" cellspacing="0"
   cellpadding="2"></table>');

然后

$('#gvCapitalByYear').append('<tr><td>my data</td><td>more data</td></tr>');

稍后使用jQuery动态创建html内容

2 个答案: