创建可编辑的新行到表

我想通过使用ajax和表动态行添加到数据库的详细信息。创建可编辑的新行到表

例如

----

{客户：下拉菜单} | {说明：textarea} | 删除

添加新客户

---

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

与描述我想单击以允许他们编辑文本区域的描述，但当您单击它时只显示文本你刚刚进入。（不是文本区域大纲）

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

什么库或示例可以帮助我开始使用它？

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

来源

2009-05-22 Derek Organ

你应该可以使用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的校长;如果他们需要重新编辑，只显示文本区域&隐藏在div）

在那里你看到这样的功能

来源

2009-05-22 14:08:49 Dave

使用jQuery。

使用tokenizing autocomplete plugin for jQuery

对于就地编辑使用Jeditable。

我会远离下降，他们几乎总是不好的设计，无论是在菜单中或从一长串选项中选择。对于希望可能会很长的客户列表而言，这是UI组件的可怕选择。

使用下拉菜单的唯一时间是选项列表短的时候和众所周知。因此，如果它是可以接受的，它可能必须是很少有变化的选项列表，其长度不到10个左右，并且经常使用（因此它是众所周知的）。下降是痛苦的。

来源

2009-05-22 12:48:03 cgp

谢谢，我宁愿做下拉以停止任何与文本不匹配的错误。他们无权创建新的“客户” – 2009-05-22 12:57:26

我将其更改为令牌自动完成。这避免了他们输入不存在的项目的问题。您可以显示错误或以其他方式控制结束标记的内容。 – cgp 2009-05-22 13:03:36

大多数网站与造型完成它 - 你可以风格一个文本输入框，看起来像纯文本（除去边框和背景颜色设置为透明）。当点击（聚焦），风格变化的输入：

<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提出的方法。

来源

2009-05-22 14:24:23 levik

创建可编辑的新行到表

回答

相关问题