Javascript：可编辑表格

<table border="0" id="tbl1" width="100%"> <tr> <td width="25%">1,1</td> <td width="25%">1,2</td> <td width="25%">1,3</td> <td width="25%">1,4</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> <td>2,4</td> </tr> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> <td>3,4</td> </tr> </table> <mce:style><!-- .hidden_text{ border:#006699 1px solid; BORDER-LEFT-STYLE:none; BORDER-TOP-STYLE:none; BORDER-RIGHT-STYLE:none; } --></mce:style><style mce_bogus="1">.hidden_text{ border:#006699 1px solid; BORDER-LEFT-STYLE:none; BORDER-TOP-STYLE:none; BORDER-RIGHT-STYLE:none; }</style> <mce:script type="text/javascript"><!-- var textBox = document.createElement("input"); textBox.type = "text"; textBox.className = "hidden_text"; /* textBox.options.add(new Option(1)); textBox.options.add(new Option(2)); textBox.options.add(new Option(3)); textBox.options.add(new Option(4)); */ var currentElement; function showElement(){ selectChanged(); if((currentElement == window.event.srcElement) || (textBox == window.event.srcElement)){ window.event.cancelBubble = true; return; } currentElement = window.event.srcElement; var txt = currentElement.innerText; currentElement.innerText = ""; textBox.width = currentElement.width; currentElement.appendChild(textBox); textBox.focus(); textBox.value = txt; } function registerEvents(tbl){ var row, col; for(row = 0; row < tbl.rows.length; row++){ for(col = 0; col < tbl.rows[row].cells.length; col++){ tbl.rows[row].cells[col].onclick = showElement; } } } function selectChanged(){ var tmp = window.event.srcElement; if(tmp != textBox && tmp != currentElement && currentElement != null){ currentElement.innerText = textBox.value; currentElement = null; } } registerEvents(document.getElementById("tbl1")); document.onclick = selectChanged; // --></mce:script>