就地編輯

Question

我有一張這樣的桌子

<tr>
    <td>No.</td>
    <td>Username</td>
    <td>Password</td>
    <td>Valid Until</td>
    <td>Delete</td>
    <td>Edit</td>
</tr>
<tr>
    <td>1</td>
    <td id="1">
              <div class="1u" style="display: none;">Username</div>
              <input type="text" class="inputTxt" value="Username" style="display: block;"/>
            </td>
    <td id="1">
              <div class="1p" style="display: none;">Password</div>
              <input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
    <td>18 Jul 09</td>
    <td><button value="1" class="deleteThis">x</button></td>
    <td class="editRow">Edit</td>
</tr>

單擊編輯時，我運行此功能，這會用輸入字段替換文本，所以我想要的是在單擊其他地方而不是保存時將其取消回文本。

        $('.editRow').click(function() {
        var row = $(this).parent('tr');

        row.find('.1u').slideUp('fast');
        row.find('.1p').slideUp('fast');
        row.find('.inputTxt').slideDown('fast');

    }).blur(function() { 
        row.find('.inputTxt').slideUp('fast');
        row.find('.1u').slideDown('fast');
        row.find('.1p').slideDown('fast');
    });

使用此功能，文本會更改為輸入字段，但當我單擊其他地方時，輸入字段不會變回文本。

謝謝你。

Answer 1

有一個很好的插件

Answer 2

剛剛編輯了我的功能，因為該插件不適合我的應用程序

        $('.editRow').live('click', function() {
            var row = $(this).parent('td').parent('tr');
            row.find('.1u').slideUp('fast');
            row.find('.1p').slideUp('fast');
            row.find('.inputTxt').slideDown('fast');
            $(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
    });

Answer 3

您的模糊適用於按鈕td.editRow但不適用於輸入字段。 我認為您應該將代碼分開並且它應該可以工作。

$('.editRow').click(function() {
    var row = $(this).parent('tr');

    row.find('.1u').slideUp('fast');
    row.find('.1p').slideUp('fast');
    row.find('.inputTxt')
        .slideDown('fast')
        .blur(function() { 
            row.find('.inputTxt').slideUp('fast');
            row.find('.1u').slideDown('fast');
            row.find('.1p').slideDown('fast');
        });
    });