jQuery $().append | Problem with table creation

[Djumpen]

Здравствуйте. Помогите пожалуйста разобраться с работой ф-и из сабжа.

$('.mytable').append ("<tr>");
$('.mytable').append("<td> "+element+" </td> ");
$('.mytable').append("<td> "+country+" </td> ");
$('.mytable').append("<td> "+lenght+" </td>");
$('.mytable').append ("</tr>");

<table class="mytable" border="1">
<tr>
<td>Название</td> <td>Страна</td> <td>Длительность</td>
</tr>
<tr>
<td>Фильм1</td> <td>США</td> <td>148мин</td>
</tr>

</table>

Хотелось бы, чтобы функция добавляла новый row в конец таблици, но в обновленной DOM модели наблюдаю следующее (при добавлении 2-х элементов):

<table class="mytable" border="1">
<tbody>
<tr>
<td>Название</td> <td>Страна</td> <td>Длительность</td>
</tr>
<tr>
<td>Фильм1</td> <td>США</td> <td>148мин</td>
</tr>
<tr/>
<tr/>
</tbody>
<td>НовыйФильм1</td>
<td>США</td>
<td>94мин</td>
<td>НовыйФильм2</td>
<td>Россия</td>
<td>131мин</td>

</table>

Что не так, подскажите.

[monolithed]

После элемента table всегда идет tbody, даже если вы его не писали.


$('.mytable > tr').append ("<td />");

[e1f]

После элемента table всегда идет tbody, даже если вы его не писали.


$('.mytable > tr').append ("<td />");

Только не >, или tbody > tr

[monolithed]

Только не >, или tbody > tr
ага, тогда уж, после создания tr: tr > td

[Djumpen]

Извините, а можно конкретно строчку кода, как он должен выглядеть. "после создания tr: tr > td"
А то наверно что то неправильно делаю, не получилось.
Спасибо.

[monolithed]

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var array = [1,2,3];
$('body').append('<table><tr/></table>');
for(var i=0, j=0; j=array[i]; i++){
$('table tbody > tr').append('<td style="border: 1px solid">'+array[i]+'</td>');
}
});
</script>

[e1f]

Ололо, кокой кошмар. monolithed, скорость работы такого будет несколько удручающей...

[monolithed]

Ну можно конечно по иному, но такой подход я в записках Рейсига видел
Доп. блин точно, подправил

[Djumpen]

Ваш код создает во всех моих таблицах по 2 новых столбца (это без цикла вовсе) + создает новую таблицу. При повторной попытке добавить элементы разбрасывает их непонятно как.
И немножко задание поменялось: есть такая таблица:
<table id="mytable">
<tr>
<td> 1 </td> <td> 2 <td> <td> 3 </td>
</tr>
<tr id="app">
<td> 1 </td> <td> 2 <td> <td> 3 </td>
</tr>
<tr id="app2">
<td> 1 </td> <td> 2 <td> <td> 3 </td>
</tr>
</table>

То есть у меня одна таблица, но строки нужно будет записывать в разные места. Структура не обязательно такая, главное сам принцип. Пока что ничего хорошего не получилось =)

[monolithed]

Ваш код создает во всех моих таблицах по 2 новых столбца (это без цикла вовсе) + создает новую таблицу. При повторной попытке добавить элементы разбрасывает их непонятно как.


Мой код корректно создает следующую таблицу:

<table>
<tr>
<td> 1 </td>
<td> 2 <td>
<td> 3 </td>
</tr>
</table>


Видимо вы просто скопировали код не поняв как он работает.

То есть у меня одна таблица, но строки нужно будет записывать в разные места.
В чем проблема-то?

[monolithed]

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
td {border: 1px solid;}
</style>

<script type="text/javascript">
$(function(){
var array = [1,2,3];
$('body').append('<table><tr/></table>');
for(var i=0, j=0; j=array[i]; i++){
$('table tbody > tr').append('<td>'+array[i]+'</td>');
}

//Добавим еще одну строку
$('table tbody > tr').append('<td>4</td>');

//Добавим еще одну строку третьей по счету будет
$('table tr > td:eq(1)').after('<td>5</td>');

//Склонируем первую таблицу и вставим после второй
$('table').clone(true).insertAfter('table');

});
</script>

[Djumpen]

Выполняю даный код 3 раза (с разными значениями переменных)

$('body').append('<table><tr/></table>');

$('table tbody > tr').append('<td style="border: 1px solid">'+element+'</td>');
$('table tbody > tr').append('<td style="border: 1px solid">'+country+'</td>');
$('table tbody > tr').append('<td style="border: 1px solid">'+lenght+'</td>');

Вышло следующее:
http://wowcheater.net/table.jpg

Но всеравно мне не нужно создавать новую таблицу, нужно добавлять записи в разные места существующей, а "В чем проблема" - я не представляю как.

[monolithed]

Выполняю даный код 3 раза (с разными значениями переменных)
Для чего?
Но всеравно мне не нужно создавать новую таблицу, нужно добавлять записи в разные места существующей, а "В чем проблема" - я не представляю как.

Выше последний пример посмотрите, там есть такие манипуляции и даже прокоментированы

[Djumpen]

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

//Добавим еще одну строку
$('table tbody > tr').append('<td>4</td>');

//Добавим еще одну строку третьей по счету будет
$('table tr > td:eq(1)').after('<td>5</td>');

//Склонируем первую таблицу
$('table').clone(true).insertAfter('table');

});
</script>

Мне нужно добавлять Строку. Не <td> ячейку, а <tr> <td> ... </td> </tr>

И все таки - как работать с конкретной таблицей #mytable и добавлять данные в <tr> с конкретным id? Мне не 1 раз придется добавить, а выполнять операции большое кол-во раз. Первое добавление происходит еще нормально, дальше данные добавляются непонятно куда.

[monolithed]

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
td {border: 1px solid;}
</style>

<script type="text/javascript">
$(function(){
var array = [1,2,3];
$('body').append('<table></table>');
for(var i=0, j=0; j=array[i]; i++){
$('table').append('<tr><td>'+array[i]+'</td></tr>');
}

//Добавим еще одну tr после третьего по счету элемента
$('tr:eq(2)').after('<tr><td>4</td></tr>');

});
</script>

Получили:


<style type="text/css">
td {border: 1px solid;}
</style>

<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>