Динамически добавлять данные в строку таблицы - PullRequest
Новая
       3

Динамически добавлять данные в строку таблицы

1 голос
/ 16 мая 2011

Эта проблема связана с моим предыдущим вопросом в этой ссылке . Теперь я пытаюсь сделать что-то противоположное. У меня здесь есть динамическая таблица (где вы можете добавлять и удалять строки), и любые данные, которые пользователь вводит при последнем использовании таблицы (запуск по кнопке), должны быть извлечены и размещены в той же таблице (если такая кнопка нажата).

Вот код, который я использовал для получения данных из моей динамической таблицы: 

$('#tableSearchMainAccount1 tr').each(function(){  
var td = '';                   
   if ($(this).find("td:first").length > 0) {    // used to skip table header (if there is)            
      $(this).find('option:selected').each(function(){
         td = td + $(this).text()+ ',';
      });
   td = td + $(this).find('input').val();
   filt[ctr]=td;
   ctr += 1;           
   } 
});   
alert (filt);  //alert output like  name,equals,ann,age,equals,11

Теперь я хочу, чтобы при повторном нажатии на кнопку эти предыдущие входные данные снова были опубликованы в моей динамической таблице.

Мой стол выглядит примерно так: 

<table> <tr><th>field</th><th>comparison</th><th>value</th></tr>   
 <tr>
    <td>
      <select style="width:5em;" class="field">
        <option>name</option>
        <option>age</option>
        <option>sex</option>
      </select>
    </td>
    <td>
      <select style="width:5em;" class = "comp">
        <option>equals</option>
        <option>starts with</option>
        <option>not equal to</option>
      </select>
    </td>
    <td><input type="text" class = 'value'></td>
    <td><img class="add" src="css/images/add.png" /></td> // this is used to add new row
 </tr>
</table>

Последние данные, которые пользователь должен ввести в таблицу, должны отображаться в таблице, когда таблица снова появится. Как добавить данные в мою динамическую таблицу?

EDIT:
Когда кнопка нажата, открывается диалоговое окно, в котором содержится моя динамическая таблица, и каждый раз, когда пользователь закрывает диалоговое окно, все строки в этой таблице исчезают так же, как данные, введенные пользователем. Я уже создал переменную, которая содержит последние введенные данные в таблице. Поэтому при повторном нажатии кнопки я хочу, чтобы таблица генерировала или отображала последние введенные данные пользователем. Выходные данные должны совпадать с последними входными данными.

Ответы [ 2 ]

3 голосов
/ 16 мая 2011

Если у вас есть идентификатор кнопки add и вы хотите добавить строку таблицы в конец: 

$('#add').on('click', function() {
   var $lastTr = $('table tr:last');
   $lastTr.clone().insertAfter($lastTr);
   $('#add', $lastTr).remove();
});

Использование .clone, чтобы помочь нам клонировать последний ряд, и добавление его в конце.

Скрипка: http://jsfiddle.net/garreh/w9fXJ/

И чтобы предупредить вас о следующем вопросе, добавьте удаление строки ; -) 

$('.remove_row').on('click', function() {
    $(this).closest('tr').remove();
});

Скрипка: http://jsfiddle.net/garreh/w9fXJ/1/

0 голосов
/ 16 мая 2011

JQuery. prepend и JQuery. append поможет вам

...