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

    });

这会用输入字段替换文本，所以我想要的是在其他地方单击而不是保存时将其取消回文本。

我该如何做以及改善我的功能的任何建议$('.editRow').click

////////////编辑//////////

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

您可以像处理点击一样处理模糊事件。

   $('.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(){  do something else});

希望这会有所帮助

<强>更新

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

               //change the .inputTxt control to a span 
            });

    })

Answer 2

不应调用您的.blur（...）处理程序，因为该行本身永远不会获得焦点。您可以在每个可编辑控件上放置一个模糊处理程序。在该处理程序中，您检查是否有任何可编辑字段具有焦点。如果没有，则调用完成编辑模式的例程。

<强> - 编辑 -

您在上面编辑的猜测中并没有太远。尝试这样的事情：

$('.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('.1u').slideDown('fast');
        row.find('.1p').slideDown('fast');
        row.find('.inputTxt').slideUp('fast');
    });
})

Answer 3

您还可以在表格元素上放置一个点击处理程序。然后，由于冒泡，所有点击将通过该处理程序。

Answer 4

这个模糊功能不起作用所以我只是添加了一个取消按钮来完成这项工作。

如果在其他地方点击，如何将元素样式更改回正常状态？

4 个答案: