jQuery replace and add new element

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

jbl · Accepted Answer · 2012-03-05 11:03:10Z

1

I'd try something like this using closest() and before()

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

Hope this will help

answered Mar 5, 2012 at 11:03

jbl

15.5k3 gold badges37 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henry · Accepted Answer · 2012-03-05 11:05:56Z

Assuming:

Your new row is in the same structure as your current row
You want the new row to also have the 'Insert' functionality

You want a click event handler which does something to this effect:

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

Where #table is the id of your table.

Here's a simple example

If you are inserting something completely different, then you do not need to use on() or clone(), and the code becomes simpler:

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

Where <tr /> would be whatever you are trying to insert.

solarise · Accepted Answer · 2012-03-05 11:06:17Z

1

This might work for you. It'll find the parent tr of the button you just clicked, clone it (including the onClick functionality of the button) and insert that before the parent tr. This will result in a new row containing the same information as the target row though. Depending on what results you want to show in the new row, you might want to alter the code to clear out any copied values too.

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

answered Mar 5, 2012 at 11:06

solarise

4532 silver badges3 bronze badges

Comments

Jibi Abraham · Accepted Answer · 2012-03-05 11:06:45Z

0

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.

answered Mar 5, 2012 at 11:06

Jibi Abraham

4,6962 gold badges33 silver badges60 bronze badges

Collectives™ on Stack Overflow

jQuery replace and add new element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related