编辑到位

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

刚编辑我的功能，因为该插件没有为我的应用程序套件以及一个nice plugin

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

您的模糊应用于按钮（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'); 
        }); 
     }); 

Answer 3

有此