Question

我正在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中实现这一目标？

Answer 1

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

$（ '＃TD-ID'）。HTML（{DIV-内容变为-这里}）。

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

Answer 2

请尝试以下代码：

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并分享您的想法。

Answer 3

要将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 Demo

Answer 4

@ user2067567，这是一个健康的方法，在你将它附加到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);

这都是未经测试的，但是发布只是为了给你一个大致的想法。如果您需要更多详细信息，请与我们联系。

Answer 5

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

Answer 6

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

使用jQuery动态创建表内的div？

6 个答案: