Question

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

Answer 1

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

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

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

<强>更新

我检查了你的评论，你应该试试这个：

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

希望它有所帮助！

Answer 2

<li contenteditable="true"> Editablecontent </li>

Answer 3

在您的列表项上附加点击事件。
单击时删除项目的内容并将其替换为带有输入框和按钮的表单
重新定义表单的提交事件以对数据库执行所需的操作
删除表单并将修改后的项目重新插入列表中。

如何使用jQuery制作可编辑的列表项？

3 个答案: