Javascript 为表格创建可编辑的新行

我试图通过使用ajax和表动态行向数据库添加详细信息

e、 g

----

{客户：下拉菜单}|{说明：文本区域}|删除

添加新客户

---

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

与我希望单击的描述类似，允许他们编辑文本区域的描述，但当您单击离开时，它仅显示您刚刚输入的文本。（不是文本区域轮廓）

“添加新客户”按钮创建一个新的空行

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

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

使用jQuery

使用

供就地编辑使用

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

---

使用下拉列表真正有意义的唯一时间是当选项列表较短且众所周知时。因此，要让它被接受，它可能必须是一个选项列表，这些选项很少发生变化，长度不到10项左右，并且经常被使用（因此这是众所周知的）。下拉列表很痛苦。

使用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>

在这个函数中，如果需要的话，您可以使用option元素值做一些事情（一篇ajax文章或其他什么）

---

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

大多数网站都可以通过设置样式来实现这一功能——您可以将文本输入框设置为纯文本样式（通过删除边框并将背景色设置为透明）。单击输入（聚焦）时，样式将更改：

<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'"/>

.blurredText{边框：无；背景色：透明；}
. . .

---

然而，用同样的方式设置select的样式可能会很困难，因为select控件是出了名的抵制CSS的。您仍然可以使用Dave建议的方法。

谢谢，我宁愿使用下拉菜单来停止任何文本不匹配的错误。他们无权创建新的“客户”，我将其更改为标记自动完成。这避免了他们输入不存在的项目的问题。您可以显示错误或以其他方式控制最终标记化的内容。感谢链接。关于自动完成，我仍然想使用下拉菜单。。在某些情况下，用户甚至不知道第一个字母。。他们需要查看列表才能选择正确的。错误。。。如果他们不知道第一个字母，他们将如何在下拉列表中找到他们？这是我想要的方式。因为我所做的是最好的方式，解释它将超出我的问题范围。我在问我怎么做。回答你的问题。。它是由管理员管理的列表。。用户没有收到列表中新项目的通知，但他们仍然需要选择最相关的项目。这里的关键词是“相关”。并不是每次都能得到准确的答案。因此=>显示列表很重要。干杯dave，是的，这是我自己的想法，但我想看看是否有任何好的示例代码，我可以按照我描述的方式处理可编辑行。

<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'"/>