Varada Varada - 1 year ago 106
Javascript Question

On clicking an html table cell Make it editable with dropdown Box rather than textbox

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+" \">";

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 Source

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;



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. = "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";


tablecell.innerHTML = "";

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