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)

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, время: 17:19.