Javascript 就地编辑

我有一张这样的桌子

<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>

使用此功能，文本将更改为输入字段，但当我单击其他位置时，输入字段不会更改为文本

---

谢谢。

您的模糊应用于按钮

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

---

模糊应用于按钮

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

---

有一个插件用于此

有一个用于此

刚刚编辑了我的函数，因为插件不适合我的应用程序

        $('.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>');
    });

$（'.editRow'）.live（'click'，function（））{
var行=$（this.parent（'td'）。parent（'tr'）；
row.find（'.1u'）.slideUp（'fast'）；
row.find（'.1p'）.slideUp（'fast'）；
row.find（'.inputxt'）。slideDown（'fast'）；
$（this.parent（'td'）.empty（）.append（'/'）；
});

刚刚编辑了我的函数，因为插件不适合我的应用程序

        $('.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>');
    });

$（'.editRow'）.live（'click'，function（））{
var行=$（this.parent（'td'）。parent（'tr'）；
row.find（'.1u'）.slideUp（'fast'）；
row.find（'.1p'）.slideUp（'fast'）；
row.find（'.inputxt'）。slideDown（'fast'）；
$（this.parent（'td'）.empty（）.append（'/'）；
});

但我想让两个输入字段在一行中可编辑，使用此插件我们必须反复单击，列表很长。但我想让两个输入字段在一行中可编辑，使用此插件我们必须反复单击，列表很长。