如何使用jQuery编辑列表项？ [英] How to make editable list item using jQuery?

问题描述

我想在列表视图中显示用户信息，并从数据库中提取数据。现在我的目标是使列表视图可编辑，以便当用户点击任何列表视图时，它的响应像一个文本框和键盘出现（移动）。在编辑之后，用户可以按下保存按钮以将他/她的可编辑内容保存到DB。
我使用HTML，jQuery和CSS与Adobe PhoneGap API。

解决方案

我创建了一个小提琴，我认为这是你想要的：

http： //jsbin.com/ijexak/2/edit

在小提琴中，单击要编辑的文本，然后单击您的文本将保存的输入元素的focusOut，

更新

我检查过您的评论，请尝试：

Html

  < ul> 
< li> 
< span class =display> erum< / span> 
< input type =textclass =editstyle =display：none/> 
< / li> 
< li> 
< span class =display> ingress< / span> 
< input type =textclass =editstyle =display：none/> 
< / li> 
< / ul> 
  

JS

  $（。display）。click（function（）{
 $（this）.hide（）。siblings（。edit）。 val（$（this）.text（））。focus（）; 
}）; 
 
 $（。edit）。focusout（function（）{
 $（this）.hide（）。siblings（。display）。show （this）.val（））; 
}）; 
  

更新的小提琴

希望它有帮助！

I want to display user information in a listview with data pulled from a DB. Now my target is to make the listview editable so that when a user clicks on any listview, it responds like a "Textbox" and a keyboard appears (for mobile). After editing, the user can press a "save" button to save his/her editable contents to the DB. I am using HTML, jQuery, and CSS with the Adobe PhoneGap API.

解决方案

I have created a fiddle and i think this is what you want :

http://jsbin.com/ijexak/2/edit

In fiddle click over the text to edit and on focusOut of the input element your text will save and input element will hide.

Updated

I checked your comment, you should try this:

Html

   <ul>
       <li>
           <span class="display">erum</span>
           <input type="text" class="edit" style="display:none"/>
       </li>
       <li>
           <span class="display">ingress</span>
           <input type="text" class="edit" style="display:none"/>
       </li>
   </ul>

JS

$(".display").click(function(){
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

$(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
});

Updated fiddle

Hope it helps!

这篇关于如何使用jQuery编辑列表项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！