Используйте jQuery clone для копирования только 1 строки с именем класса - PullRequest
Новая
       11

Используйте jQuery clone для копирования только 1 строки с именем класса

2 голосов
/ 17 апреля 2011

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

Этот код предназначен для добавления членов в базу данных.Первая строка - это собственная информация участника.Другие строки предназначены для пользователя, чтобы добавить других членов в свою группу.Так что это второй или более поздние ряды, которые я хочу клонировать.Новые строки должны быть добавлены в конце.

Копируемый tr имеет класс .leaderrow.Я думаю, что jQuery копирует все строки с этим классом каждый раз вместо одной.Как я могу заставить его добавлять только одну строку при каждом нажатии кнопки?

Вот jQuery: 

$(document).ready(function(){
    $('#addRow').live('click', function() {
        $('.leaderrow').clone().appendTo('#entries');
    });
})

Вот таблица, которая является частью формы: 

<table width="100%" border="0" class="unsorted_table">
  <thead>   
      <tr>
           <th>Name*</th>
           <th>Action</th>
      </tr>
  </thead>
  <tbody id="entries">
      <tr>
            <td>User's own name</td>
            <td>&nbsp;</td>
      </tr>
      <tr class="leaderrow">
            <td><select name="leaderid[]" >
              <option value="3">Sue</option>
              <option value="4">Jeannie</option>
              <option value="5">Kerry</option>
              <option value="6">Travis</option>
               </select>
            </td>
            <td><a href="" name="delete_row[]" class="remove">remove</a></td>
       </tr>
    </tbody>
    <tfoot>
       <tr> 
            <td><p><input type="button" id="addRow" value="Add Another" /></p></td>
       </tr>
    </tfoot>
</table>

1 Ответ

2 голосов
/ 17 апреля 2011

Прежде всего $('.leaderrow') выбирает все элементы, которые соответствуют этому классу.Вы можете использовать .first(), .last() или .eq(), чтобы выбрать конкретный.

Однако я бы предложил, чтобы выдобавьте HIDDEN .leaderrow.template (имеет оба класса), который клонируется, затем .removeClass('templaterow') перед добавлением.

Кроме того, если вы имеете дело с более чем одной таблицей, вы можете захотетьсделайте что-нибудь с .closest(), чтобы ограничить область, которую вы ищете: 

var tmpl = $(this).closest('table').find('.leaderrow.template');
tmpl.clone().removeClass('template').insertBefore(tmpl);
// and use CSS:
// .leaderrow.template { display: none; }
...