Динамічно створювати div inside table за допомогою jQuery?

Я створюю div в динамічному режимі в jQuery, як згадується в наведеному нижче коді, доданому до форми.

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

Now I need to have <td> (Which I need to create) inside which I need the div element I created. Like this:

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

How do I achieve this in jQuery?

1
@mark Agree. Змінено ідентифікатор. Це зразок коду, який я прийшов за моїм сценарієм
додано Автор user2067567, джерело
@mark Agree. Змінено ідентифікатор. Це зразок коду, який я прийшов за моїм сценарієм
додано Автор user2067567, джерело
1. Зауважте, що ідентифікатори чутливі до регістру. Тест! == тест 2. Ідентифікатори є унікальними ідентифікаторами і повинні бути унікальними в DOM. Таким чином, ви не можете мати форму та розділ з ідентифікатором "тест"
додано Автор Mark Chorley, джерело
1. Зауважте, що ідентифікатори чутливі до регістру. Тест! == тест 2. Ідентифікатори є унікальними ідентифікаторами і повинні бути унікальними в DOM. Таким чином, ви не можете мати форму та розділ з ідентифікатором "тест"
додано Автор Mark Chorley, джерело

15 Відповіді

відповідь на ваше запитання досить проста, але є важливий момент, який ви пропустили, щоб пояснити. Який tr ви хочете додати до. Ви хочете створити новий tr для кожного div, який ви хочете додати до таблиці, чи є якась інша логіка?

0
додано

відповідь на ваше запитання досить проста, але є важливий момент, який ви пропустили, щоб пояснити. Який tr ви хочете додати до. Ви хочете створити новий tr для кожного div, який ви хочете додати до таблиці, чи є якась інша логіка?

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

Also check this JSFiddle and share your thoughts.

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

Also check this JSFiddle and share your thoughts.

0
додано

@ user2067567, ось здоровий підхід, покладіть ідентифікатор на динамічну таблицю, перш ніж додати його до DOM ...

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

...Then make your base point for manipulating your new table from this ID...

var mtable = $('#mtableid');

...Then look for the tr row you want to enter...

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

...Then append content to the first row...

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

This is all untested, but posted just to give you a general idea. Let me know if you want further details.

0
додано

@ user2067567, ось здоровий підхід, покладіть ідентифікатор на динамічну таблицю, перш ніж додати його до DOM ...

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

...Then make your base point for manipulating your new table from this ID...

var mtable = $('#mtableid');

...Then look for the tr row you want to enter...

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

...Then append content to the first row...

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

This is all untested, but posted just to give you a general idea. Let me know if you want further details.

0
додано

@ user2067567, ось здоровий підхід, покладіть ідентифікатор на динамічну таблицю, перш ніж додати його до DOM ...

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

...Then make your base point for manipulating your new table from this ID...

var mtable = $('#mtableid');

...Then look for the tr row you want to enter...

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

...Then append content to the first row...

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

This is all untested, but posted just to give you a general idea. Let me know if you want further details.

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 Demo.

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 Demo.

0
додано

Чому ви не створили першу таблицю? а потім додати таблицю до дому. дайте ідентифікатор ТД, де ви хочете вставити свій div.

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

Функція html() поміщає його вміст у вибраний вузол dom. ви також можете використовувати append (),

0
додано
Я намагаюся змінити існуючу логіку. У мене вже є Div, який утворив цикл через відповідь Json, і тепер я намагаюся змінити з мінімальними зусиллями, додавши до нього таблицю
додано Автор user2067567, джерело

Чому ви не створили першу таблицю? а потім додати таблицю до дому. дайте ідентифікатор ТД, де ви хочете вставити свій div.

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

Функція html() поміщає його вміст у вибраний вузол dom. ви також можете використовувати append (),

0
додано
Я намагаюся змінити існуючу логіку. У мене вже є Div, який утворив цикл через відповідь Json, і тепер я намагаюся змінити з мінімальними зусиллями, додавши до нього таблицю
додано Автор user2067567, джерело

Чому ви не створили першу таблицю? а потім додати таблицю до дому. дайте ідентифікатор ТД, де ви хочете вставити свій div.

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

Функція html() поміщає його вміст у вибраний вузол dom. ви також можете використовувати append (),

0
додано
Я намагаюся змінити існуючу логіку. У мене вже є Div, який утворив цикл через відповідь Json, і тепер я намагаюся змінити з мінімальними зусиллями, додавши до нього таблицю
додано Автор user2067567, джерело

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');
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');
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');
0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram