點擊一個html表格單元格使其可以編輯下拉框而不是文本框

我有一個表格，並且使它可編輯，這就是爲什麼它的單元格將變成點擊每個單元格的文本框。代碼是點擊一個html表格單元格使其可以編輯下拉框而不是文本框

function changeContent(tablecell) 
{ 
    tablecell.innerHTML = "<INPUT type=text name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+" \">"; 
    tablecell.firstChild.focus(); 
}

我想顯示一個下拉列表，而不是文本框。此外，下拉應該有選項每日和每月。

我該怎麼做？

來源

2011-05-28 Varada

這是更好地使用jQuery對這樣的事情。花你的時間和結果將是偉大的。 – sergzach 2011-05-28 09:45:47

@sergzach我不同意這一點。在開始掌握JQuery之前，他需要更好地理解內置的JS函數。 – Vinnyq12 2011-05-28 10:51:26

靜態字符串例如：

function changeContent(tablecell) 
{ 
var cellInner = "<select name=\"newname\" onBlur=\"javascript:submitNewName(this);\">"; 
cellInner += "<option>" + tablecell.innerHTML + "</option>"; 
cellInner += "<option>Daily</option>"; 
cellInner += "<option>Monthly</option>"; 
cellInner += "</select>"; 

tablecell.innerHTML = cellInner; 

tablecell.firstChild.focus(); 

}

但說實話，我不喜歡靜態字符串的方法。你會更好地使用JS DOM功能。

喜歡的東西：

function changeContent(tablecell) 
{ 
var dropDown = document.createElement("select"); 

// Set attributes. 
dropDown.name = "newname"; 
//.... etc 

var option1 = document.createElement("option"); 
option1.innerHTML = tablecell.innerHTML; 

var option2 = document.createElement("option"); 
option2.innerHTML = "Daily"; 

var option3 = document.createElement("option"); 
option3.innerHTML = "Monthly"; 

dropDown.appendChild(option1); 
dropDown.appendChild(option2); 
dropDown.appendChild(option3); 

tablecell.innerHTML = ""; 
tablecell.appendChild(dropDown); 
}

我沒有測試代碼，以便可能有一些語法錯誤，但原則是正確的

來源

2011-05-28 09:43:46 Vinnyq12

function changeContent(tablecell) 
{ 
    tablecell.innerHTML = "<SELECT><option name='daily'>Daily</option><option name='monthly'>Monthly</option></SELECT>"; 
}

答案可能不完整。在這種情況下，請詳細說明。

來源

2011-05-28 09:42:20 sergzach

點擊一個html表格單元格使其可以編輯下拉框而不是文本框

回答

相關問題