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

我有这样一个表这个如何将元素样式更改为正常，如果点击其他地方？

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

我正在使用这个，但输入字段不会变回文本。

谢谢。

来源

2009-07-20 Shishant

被警告说，使用slideUp/Down动画tr的动画可能看起来严峻的X浏览器。淡入/淡出工作正常，但仍然可以出现奇怪的即ie。 – redsquare 2009-07-20 16:34:12

如果您的第一行是表格的标题信息，则应考虑使用该行的标记而不是。 – 2009-07-20 17:13:27

shishant，你有没有注意到我的答案更详细的版本？你的反应很快，我很好奇，如果你有它的工作。 – 2009-07-21 18:08:25

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

来源

2009-07-22 10:44:56 Shishant

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

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

希望这有助于

UPDATE

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

    })

来源

2009-07-20 16:30:05 ak3nat0n

你也可以把一个单击处理表元素。所有的点击都会通过该处理程序，因为冒泡。

来源

2009-07-20 16:31:00 mveerman

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

CNC中

你是不是在你编辑的猜测太离谱以上。尝试这样的：

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

来源

2009-07-20 16:46:36

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

回答

相关问题