Question

I have a table and I made it editable, thats why its cells will become textbox on clicking each cell.
The code is

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

I would like to display a dropdown list instead of textbox. Also that drop down should have the options Daily and Monthly.

How can I do that?

Answer 1

Static strings example:

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

}

But to be honest I do not like the static string approach. You would be better using the JS DOM functions.

Something like:

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

I haven’t tested the code so there may be some syntax errors but the principle is correct