Question

我有一张桌子，我让它可以编辑，这就是为什么它的单元格会在点击每个单元格时成为文本框。代码是

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

我想显示下拉列表而不是文本框。此下拉列表还应包含“每日”和“每月”选项。

我该怎么做？

Answer 1

静态字符串示例：

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);
}

我没有测试过代码，因此可能存在一些语法错误，但原理是正确的

Answer 2

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

答案可能不完整。在这种情况下，请详细说明。

单击html表格单元格使用下拉框而不是文本框使其可编辑

2 个答案: