Добавить TR после соответствующего набора или в конце, если соответствующий набор пуст в jQuery - PullRequest
Новая
       14

Добавить TR после соответствующего набора или в конце, если соответствующий набор пуст в jQuery

0 голосов
/ 27 октября 2010

Вопрос

Я хотел бы добавить новый TR в таблицу после заданного сопоставленного набора или вместо этого в конце таблицы, если сопоставленный набор пуст. Учитывая следующий HTML: 

<table id="blax">
   <thead>
   </thead>
   <tbody>
      <tr class="alpha">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <tr class="alpha">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <!-- new "alpha" tr to go here-->
      <tr class="beta">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <tr class="beta">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <!-- but new "gamma" tr to go at end-->
   </tbody>'
</table>

Я знаю, как добавить новый tr после некоторого подходящего набора, например: 

var b = $('#blax tbody');
var newAlphaTr = $('<tr class="alpha"></tr>')
   .insertAfter(b.find('tr.alpha:last'));

Но что, если тот же код выполняется для класса gamma (которого еще нет в таблице)? Какой простой способ заставить точку вставки нового элемента <tr class="gamma"></tr> просто перейти в конец таблицы , используя тот же код, что и для альфа-вставки ? 

function insertAtPosition(parentElement, afterElement, newElement) {
   // some code here that does the job for either "alpha" or "gamma"
}

function creatElement(className) {
   insertAtPosition(
      b,
      b.find('tr.' + className + ':last'),
      $('<tr class="' + className + '"></tr>'
   );
}

createElement('alpha');
createElement('gamma');

Мне нужна помощь в заполнении блока "некоторый код здесь".

Теперь немного болтовни

И случайно insertAfter возвращает вставленный элемент или элемент, после которого он был добавлен? Я предполагаю, что after возвращает вставленный элемент, а insertAfter возвращает элемент, к которому он был прикреплен, например, как работают append и appendTo, да? Документы jQuery хороши, но в них есть некоторые большие дыры, такие как отсутствие списка того, что возвращается из каждой функции (и я довольно озадачен тем, как кто-то может пропустить это). На самом деле, когда я писал этот вопрос, потребовалась некоторая реальная концентрация, чтобы убедиться, что я понял правильно.

Просто лениво думая, было бы неплохо, если бы append и appendTo поддерживали необязательный параметр, который является либо позицией индекса, либо непосредственным дочерним элементом (или набором непосредственных дочерних элементов), после ВСЕХ которого элемент будет прилагается. В случае с индексом это может быть либо желаемая позиция, либо позиция, после которой нужно вставить элемент, чтобы 0 или -1 означали в качестве первого потомка. 

var b = $('#blax tbody');
var newAlphaTr = $('<tr class="alpha"></tr>')
   .appendTo(b, $('tr.alpha', b));
// or perhaps a selector
var newAlphaTr2 = $('<tr class="alpha"></tr>')
  .appendTo(b, 'tr.alpha:last');

Это добавит новый tr с классом alpha после указанного дочернего набора. Я мог бы добавить :last к селектору, но это было бы неплохо. Если совпадающий набор 'td.alpha' пуст, он будет действовать так, как обычно делает append, и помещает его после существующих потомков.

Ответы [ 2 ]

0 голосов
/ 04 августа 2012

Имея почти 2 года опыта работы с jQuery с тех пор, как задал вопрос, теперь я вижу, что ответ прост: 

var b = $('#blax tbody'),
   newAlphaTr = $('<tr class="alpha"></tr>')
      .insertAfter(
         b.find('tr.alpha:last, tr:last')
            .first()
      );

Вместо сопоставления только на tr с желаемым классом, также соответствует последний tr независимо от класса. Затем возьмите первый с first(), который будет тот, который мы хотим вставить после. Проблема решена.

0 голосов
/ 27 октября 2010 
<tbody id='zeta'/>

$('#zeta').append('<tr class="alpha"></tr>');

Вы готовы сделать это как если-либо?

if ($ ('. Alpha'). Length> 0) {
// добавляем в класс
} Еще {
// добавляем в tbody
}

...