Question

我正在尝试使用ajax和table动态行向数据库添加详细信息。

e.g。

----

{客户：下拉菜单} | {描述：textarea} | 删除

添加新客户

---

当用户点击它时，会显示所有可用客户的下拉菜单。当你点击它时它只显示选择的客户名称（而不是下拉菜单）

与我想要的描述类似，允许他们编辑文本区域的描述，但是当你点击它时它只显示你刚输入的文本。（不是文本区域大纲）

添加新客户按钮会创建一个新的空行。

哪些库或示例可以帮助我开始使用它？

我最近在一个应用程序中看到了这一点。在此应用程序中，可以通过ajax和动态HTML添加新项目/行。

Answer 1

你应该能够使用jQuery轻松地做到这一点（查看文档中的选择器，事件和操作）。例如，对于下拉列表

<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
    <option class="name" value="cust-1">Frank Frankson</option>
    <option class="name" value="cust-2">John Johnson</option>
</select>

和jQuery：

$('.name').click(function(){        
    $('#customer-name').text($(this).text());
    $('#customer-list').hide();
});

在该函数中，如果需要，你可以用选项元素值做一些事情（ajax帖子或其他）。

更改文本区域描述的原则是相同的（您可以从文本区域中获取文本，将其添加到div并隐藏文本区域;如果需要再次编辑，只需显示textarea＆amp; amp;隐藏div）

Answer 2

使用jQuery。

使用tokenizing autocomplete plugin for jQuery

对于就地编辑，请使用Jeditable。

我会远离跌落，他们几乎总是糟糕的设计，无论是在菜单中还是从一长串选项中选择。对于像希望可能很长的客户列表这样的东西，它是UI组件的可怕选择。

使用下拉列表的唯一时间是选项列表短和众所周知。因此，为了使它可以被接受，它可能必须是一个选项列表，这些选项很少发生变化，长度小于10个左右，并且经常使用（因此众所周知）。跌落是痛苦的。

Answer 3

您看到此类功能的大多数网站都通过样式来完成它 - 您可以将文本输入框设置为纯文本样式（通过删除边框并将背景颜色设置为透明）。单击输入（聚焦）时，样式会更改：

<style>
   .blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
    onfocus="this.className=''" 
    onblur="this.className='blurredText'"/>

然后，以相同方式设置选择样式可能会很困难，因为选择控件对CSS非常有抵抗力。你仍然可以使用Dave提出的方法。

为表创建可编辑的新行

3 个答案: