-1

我在 jQuery 中动态创建一个 div，如下面的附加到表单的代码中所述。 

 var temp = document.createElement("div");
     temp.setAttribute("id", "test");

形式：

<form id="test1" method="get">
</form>

我正在尝试动态创建一个表，并且需要将它放在一个表中？

动态形成表格：

 var tableHeader = '<table border="1"> <thead> <tr><th>QueryName</th><th>Description</th><th>Modified Date</th></tr></thead><tbody>';
 $("#test").prepend(tableHeader);

现在我需要<td>（我需要创建的）在其中我需要我创建的 div 元素。像这样：

<table>
...
....
<tr> 
<td>
<div id="test">   // Div  i created dynamically in the top(1st line)
</div>
</td>
</tr>

我如何在 jQuery 中实现这一点？

4

6 回答 6

0

试试下面的代码：

var temp = document.createElement("div");
temp.setAttribute("id", "test");
console.log(temp);
var tableHeader = '<table border="1"> <thead> <tr><th>QueryName</th><th>Description</th><th>Modified Date</th></tr></thead><tbody>';
$('body').append(tableHeader);
$('table').append(temp);

还要检查这个JSFiddle并分享你的想法。

于 2013-06-25T12:38:32.730 回答
0

要将 div 追加到表的 td 上，首先必须要有这样的 td。下面的代码检查它的存在并在它不存在时添加它。

<form id="test1" method="get"></form>

JavaScript：

var tableHeader = '<table border="1"> <thead> <tr><th>QueryName</th><th>Description</th><th>Modified Date</th></tr></thead><tbody>';
$("#test1").prepend(tableHeader);

if ($('#test1 table tr td:first-child').size()==0) {
    console.log('Table has no TDs. Creating a row.');
    $('#test1 table tbody').append('<tr><td></td><td></td><td></td></tr>');
}

var temp = document.createElement("div");
    temp.setAttribute("id", "test");
    temp.appendChild(document.createTextNode('test Div Inserted'));

// appends the DIV to the first TD of the TABLE under #test1 FORM
$('#test1 table tr td:first-child').append(temp);

JSFiddle 演示。

于 2013-06-25T12:39:53.443 回答
0

@ user2067567，这是一种健康的方法，在将 id 附加到 DOM 之前，在动态表上放置一个 id ...

var tableHeader = '<table border="1" id="mtableid"> <thead> <tr><th>QueryName</th><th>Description</th><th>Modified Date</th></tr></thead><tbody>';

...然后确定从该 ID 操作新表的基点...

var mtable = $('#mtableid');

...然后查找您要输入的 tr 行...

var firstrow   = mtable.find('tr').eq(1);

...然后将内容附加到第一行...

$('<td><div>...</div></td>').appendTo(firstrow);

这都是未经测试的，但发布只是为了给你一个大致的想法。如果您想了解更多详情，请告诉我。

于 2013-06-25T12:47:43.970 回答
0

为什么不先创建表？然后将表格附加到dom中。为要插入 div 的 td 提供一个 id。

$('#td-id').html({div-content-goes-here})。

html() 函数将其内容放入选定的 dom 节点中。你也可以使用 append()，

于 2013-06-25T12:23:17.973 回答
0

您的问题的答案很简单，但是您错过了解释的重要一点。您要附加到哪个 tr。您想为要附加到表的每个 div 创建一个新的 tr 还是有其他逻辑？

于 2013-06-25T13:45:59.137 回答
0

var temp = document.createElement("div"); temp.setAttribute("id", "test");

var tableHeader = '<table border="1"> <thead> <tr><th>QueryName</th><th>Description</th><th>Modified Date</th></tr></thead><tbody>';
$("#test1").prepend(tableHeader);

$('tr').append(temp);
$('div').html('create div content');
于 2013-06-25T12:55:16.583 回答