Question

I have the following 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>

I need to insert new <tr> when I click on button with .crm_insert class.

When .crm_insertis clicked, it need to insert a new row at the current location. All
other rows will move down. For example, if insert against row 3 is clicked then
row 3 will be new row inserted and current row 3 etc will move down to become
row 4 etc.

How can I achieve this ?

All answers are good, but I can only accept one : Thanks all

Answer 1

You can try this

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

The latest versions of jquery employ on instead of live.