hi i have a table with couple of rows
and each row there is a button for editing that rows data
here is my table
<table>
<tr>
<td class="it_name"> 1111 <td/>
<td class="it_price"> 1111 <td/>
<td class="it_info"> 1111 <td/>
<td class="it_val"> 1111 <td/>
<td class="BTN"> <INPUT TYPE="button" CLASS=""edit_items" /> <td/>
</tr>
<tr>
...
</tr>
</table>
in one of tds i have a button which im going to use for editing that row
firs i get value of each td on that row
then im going to put a textfild on that td and set the value of that textfild to the old value of that td
and at last im going to change the button to another button for finalizing the edit
jq(function(){
jq('.edit_items').click(function(){
/////// getting value of each td
var name = jq.trim(jq(this).parent().siblings('.it_name').text());
var price = jq.trim(jq(this).parent().siblings('.it_price').text());
var info = jq.trim(jq(this).parent().siblings('.it_info').text());
var av = jq.trim(jq(this).parent().siblings('.it_av').text());
////// putting a textfild on each td
jq(this).parent().siblings('.it_name').html('<input class="it_name_f" type="text" value="'+name+'" />');
jq(this).parent().siblings('.it_price').html('<input class="it_price_f" type="text" value="'+price+'" />');
jq(this).parent().siblings('.it_info').html('<input class="it_info_f" type="text" value="'+info+'" />');
jq(this).parent().siblings('.it_av').html('<input class="it_va_f" type="text" value="'+va+'" />');
///////// changing button
jq(this).parent().html('<input name="" class="final" type="button" value="edit_now" />');
})
now it works fine on putting textfild on the tds but for some reason it appears that i cant change my button after i changed the other tds html !
or
if i move changing button line (which is last one on this code)
jq(this).parent().html('<input name="" class="final" type="button" value="edit_now" />');
to the top of my code now the button changes but the other tds are not going to change its eather this or that !
am i missing something ?