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> Что не так, подскажите. |
После элемента table всегда идет tbody, даже если вы его не писали.
$('.mytable > tr').append ("<td />"); |
Цитата:
|
Цитата:
|
Извините, а можно конкретно строчку кода, как он должен выглядеть. "после создания tr: tr > td"
А то наверно что то неправильно делаю, не получилось. Спасибо. |
<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> |
Ололо, кокой кошмар. monolithed, скорость работы такого будет несколько удручающей...
|
Ну можно конечно по иному, но такой подход я в записках Рейсига видел
Доп. блин точно, подправил |
Ваш код создает во всех моих таблицах по 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> То есть у меня одна таблица, но строки нужно будет записывать в разные места. Структура не обязательно такая, главное сам принцип. Пока что ничего хорошего не получилось =) |
Цитата:
<table> <tr> <td> 1 </td> <td> 2 <td> <td> 3 </td> </tr> </table> Видимо вы просто скопировали код не поняв как он работает. Цитата:
|
<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> |
Выполняю даный код 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>'); Вышло следующее: ![]() Но всеравно мне не нужно создавать новую таблицу, нужно добавлять записи в разные места существующей, а "В чем проблема" - я не представляю как. |
Цитата:
Цитата:
|
Цитата:
И все таки - как работать с конкретной таблицей #mytable и добавлять данные в <tr> с конкретным id? Мне не 1 раз придется добавить, а выполнять операции большое кол-во раз. Первое добавление происходит еще нормально, дальше данные добавляются непонятно куда. |
<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:53. |