JQuery заменить и добавить новый элемент

Question

У меня есть следующий HTML

 <tbody class="t_bdy">
          <tr class="Quotation_List_td">
            <td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
            <td class="Quotation_List_ItemTD description">&nbsp;</td>
            <td class="quantitiy">&nbsp;</td>
            <td class="unit_price">&nbsp;</td>
            <td class="discount">&nbsp;</td>
            <td class="total">&nbsp;</td>
          </tr>
          <tr class="Quotation_List_td">
            <td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
            <td class="Quotation_List_ItemTD description">&nbsp;</td>
            <td class="quantitiy">&nbsp;</td>
            <td class="unit_price">&nbsp;</td>
            <td class="discount">&nbsp;</td>
            <td class="total">&nbsp;</td>
          </tr>



        </tbody>

Мне нужно вставить новый <tr>, когда я нажимаю на кнопку с .crm_insert классом.

Когда нажимается .crm_insert, оннужно вставить новую строку в текущем местоположении.Все остальные ряды будут двигаться вниз.Например, если щелкнуть вставку против строки 3, строка 3 будет вставлена ​​новой строкой, а текущая строка 3 и т. Д. Переместится вниз, чтобы стать строкой 4 и т. Д.

Как этого добиться?

Все ответы хорошие, но я могу принять только один: Спасибо всем

Answer 1

Предполагая, что:

• Ваша новая строка находится в той же структуре, что и ваша текущая строка
• Вы хотите, чтобы новая строка также имела функцию «Вставить»

Вам нужен обработчик события щелчка, который что-то делает для этого:

$('.crm_insert', '#table').on('click', function() {
    var currentRow = $(this).closest('tr');
    currentRow.clone(true).insertBefore(currentRow);
});

Где #table - идентификатор вашей таблицы.

Вот простой пример

Если вы вставляете что-то совершенно другое, вам не нужно использовать on() или clone(), и код становится проще:

$('.crm_insert').click(function() {
    var currentRow = $(this).closest('tr');
    $('<tr />').insertBefore(currentRow);
});

Где <tr /> будет тем, что вы пытаетесь вставить.

Answer 2

Это может сработать для вас. Он найдет родительский tr кнопки, которую вы только что нажали, клонирует ее (включая функцию onClick кнопки) и вставит ее перед родительским tr. Это приведет к новой строке, содержащей ту же информацию, что и целевая строка. В зависимости от того, какие результаты вы хотите показать в новой строке, вы можете изменить код, чтобы очистить также любые скопированные значения.

$(".crm_insert").live("click", function(){
  var tr = $(this).parents("tr.Quotation_List_td"); 
  tr.clone().insertBefore(tr);
});

Answer 3

Я бы попробовал что-то подобное, используя closest () и before ()

$('a.crm_insert')
   .click(function()
    {$(this).closest('tr.Quotation_List_td').before(htmlcodeofyounewTRhere);}
    )

Надеюсь, это поможет

Answer 4

Вы можете попробовать это

$('.crm_insert').live('click', function(){
    var self = $(this);
    self.parents('tr.Quotation_List_td').before('add your row here');
});

В последних версиях jquery используется on вместо live.