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

我会尝试使用 nearest（）和之前（）

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

希望这会有所帮助

Answer 2

假设：

您的新行与当前行的结构相同
您希望新行还具有“插入”功能

您需要一个单击事件处理程序来执行此操作：

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

#table是您表格的ID。

Here's a simple example

如果要插入完全不同的内容，则无需使用on()或clone()，代码就会变得更简单：

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

<tr />将是您要插入的内容。

Answer 3

这可能适合你。它会找到你刚刚点击的按钮的父tr，克隆它（包括按钮的onClick功能）并在父tr之前插入它。这将导致新行包含与目标行相同的信息。根据要在新行中显示的结果，您可能希望更改代码以清除任何复制的值。

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

Answer 4

你可以试试这个

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

最新版本的jquery使用on代替live。

jQuery替换并添加新元素

4 个答案: