創建可編輯的新行到表

我想通過使用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

創建可編輯的新行到表

回答

相關問題