CODEWITHSUNDEEP
javascriptjqueryhtml-table
Red
Red

Reputation: 6378

jQuery replace and add new element

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

Upvotes: 1

Views: 418

Answers (4)

Jibi Abraham
Jibi Abraham

Reputation: 4696

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.

Upvotes: 0

solarise
solarise

Reputation: 453

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);
});

Upvotes: 1

Henry
Henry

Reputation: 824

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.

Upvotes: 1

jbl
jbl

Reputation: 15413

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

Upvotes: 1

Related Questions