点击一个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表格单元格使其可以编辑下拉框而不是文本框

回答

相关问题