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>