Javascript：可編輯表格

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