Tabulas td elementi -> input lauki

[Salv]

Sveiciens!

 

Problēma.

Vēlos panākt iespēju labot tabulas ierakstus. Nospiežot uz pogas "labot" atbilstošā ieraksta td elementi tiek pārvērsti par input laukiem. Kā šo panākt, kur palasīties, lai atrastu risinājumu?

 

Paldies! 

[codez]

http://jsfiddle.net/4uV4X/

<table>
    <tr><td>Hello</td><td>world</td></tr>
    <tr><td>Hello</td><td>world</td></tr>
</table>

$('table').on('click','td',function(){
    if ($(this).has('input').length) return;
    var val=$(this).html();
    $(this).html($('<input>').val(val));
    $('input',this)
        .focus()
        .on('focusout',function(){
            $(this).parent().html($(this).val());
        });
});

[briedis]

http://jsfiddle.net/DGfbR/

 

 

Protams, nevajadzētu aizmirst uzlikt keyup eventus, ka uz ESC vajadzētu atcelt labošanu, ENTER saglabāt.

[codez]

Uzlaboju, lai UI līdzīgs brieža variantam:
http://jsfiddle.net/4uV4X/1/

[codez]

Konkrētās ierakstā definētās problēmas risinājums: http://jsfiddle.net/a4VXk/

$('tr').append('<td><button class="btn-edit">edit</button></td>');
$('table').on('click','.btn-edit',function(){
    $this=$(this);
    $this.parents('tr').find('td').not($this.parent()).each(function(){
        $(this).html($('<input>').val($(this).html()));
    });
    $this.parent().html('<button class="btn-ok">ok</button>');
});
$('table').on('click','.btn-ok',function(){
    $this=$(this);
    $this.parents('tr').find('td').not($this.parent()).each(function(){
        $(this).html($('input',this).val());
    });
    $this.parent().html('<button class="btn-edit">edit</button>');
});

[Salv]

Skatoties pēc lietotāja codez pēdējā piemēra, kā es šajā vietā:

$(this).html($('<input>').val($(this).html()));

varētu padot līdzi arī "name" atribūtu?

 

Un otrs, ne mazāk svarīgais jautājums, kā būtu iespējams skripta beigās uztaisīt "Cancel" pogu (teiksim "OK" pogas vietā), kas atceltu ieraksta labošanu, atgriežot ierakstu sākotnējā izskatā?

Edited December 29, 2013 by Salv