Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   jQuery $().append | Problem with table creation (https://javascript.ru/forum/misc/13260-jquery-%24-append-%7C-problem-table-creation.html)

Djumpen 23.11.2010 04:51
jQuery $().append | Problem with table creation
 
Здравствуйте. Помогите пожалуйста разобраться с работой ф-и из сабжа.

$('.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 23.11.2010 08:17
После элемента table всегда идет tbody, даже если вы его не писали.

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

e1f 23.11.2010 14:54
Цитата:
Сообщение от monolithed (Сообщение 80316)
После элемента table всегда идет tbody, даже если вы его не писали.

$('.mytable > tr').append ("<td />");
Только не >, или tbody > tr

monolithed 23.11.2010 17:10
Цитата:
Сообщение от e1f
Только не >, или tbody > tr
ага, тогда уж, после создания tr: tr > td

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

monolithed 23.11.2010 18:49 
<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 23.11.2010 18:51
Ололо, кокой кошмар. monolithed, скорость работы такого будет несколько удручающей...

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

Djumpen 23.11.2010 19:53
Ваш код создает во всех моих таблицах по 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 23.11.2010 20:12
Цитата:
Сообщение от Djumpen
Ваш код создает во всех моих таблицах по 2 новых столбца (это без цикла вовсе) + создает новую таблицу. При повторной попытке добавить элементы разбрасывает их непонятно как.
Мой код корректно создает следующую таблицу:
<table>
    <tr>
        <td> 1 </td>
        <td> 2 <td>
        <td> 3 </td>
    </tr>
</table>


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

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

monolithed 23.11.2010 20:16 
<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 23.11.2010 20:30
Выполняю даный код 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>');


Вышло следующее:


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

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

Djumpen 23.11.2010 20:35
Цитата:
Сообщение от monolithed (Сообщение 80424) 
<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 23.11.2010 20:44 
<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>


Часовой пояс GMT +3, время: 00:12.