因為需要可修改，
所以我嘗試用table和input type="text"結合這一切的假象XDD
首先，思考是：
雙點table(也就是顯示文字的部份)，
接著輸入框顯示，輸入完內容後按下enter，則輸入框隱藏，而原本table的字改變成跟輸入框的一樣。
以下是部分程式碼（完整的在下方）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function CanModify()
{
document.getElementById('input').style.display='block';
}
function DisModify()
{
if (event.keyCode == 13)
{
document.getElementById('input').style.display='none';
var contents=document.getElementById('input').value;
document.getElementById('content').innerHTML = contents;
}
}
</script>
<body bgcolor="#FFCC99">
<table style="border: 1px; background-color: #aaeeaa; width: 155px;" ondblclick="CanModify()">
<tr>
<td><div id="content">123</div>
</td>
</tr>
</table>
<input type="text" id="input" name="test" value="123" style="display:none;" disabled="disable" onKeyDown="DisModify()" onKeyPress="DisModify()">
</body>
</html>
這邊所做的就是：
點兩下文字後，輸入框就會顯示出來，當你輸入內容後，按下enter，輸入框隱藏，而table的文字也改變。
此程式以IE瀏覽器為主，若要適用火狐或crome，可能要去查語法相容性（因為火狐好像不適用→都是onkeypress還是onpeydown的關係！！！就是因為這樣我才用兩個，其實用一個就可以了。我記得還有另一個是火狐才看得懂的
![]()
但是因為工作只要求IE就算了Orz）
最後一步，就是讓table和輸入框的位置重疊，就可以製造這完美的假象了XDD
(瀏覽器步相容還較完美？？←是語法的問題呀！咬我！）
所以結果就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function CanModify()
{
document.getElementById('input').style.display='block';
document.getElementById('input').focus();
}
function DisModify()
{
if (event.keyCode == 13)
{
document.getElementById('input').style.display='none';
var contents=document.getElementById('input').value;
document.getElementById('content').innerHTML = contents;
}
}
</script>
<body bgcolor="#FFCC99">
<table style="z-index: 2; border: 1px; background-color: #aaeeaa; width: 155px;" ondblclick="CanModify()">
<tr>
<td><div id="content">123</div>
</td>
</tr>
</table>
<input type="text" id="input" name="test" value="123" style="display:none; height:20px; z-index: 1; position: absolute; top: 7px;" onKeyDown="DisModify()" onKeyPress="DisModify()">
</body>
</html>
因為文字的大小table和輸入框的不太一樣，可以再思考font-size。
還有位置要小心有些人螢幕大小不同（像SV的螢幕就是大螢幕XDDD不是4比3），
所以要用絕對位置（但因為每個螢幕可能不同，顯示的位置也可能....要測才知道）。
如果是客戶輸入需要修改時，按下enter後，將資料送出到server端，
那就用php吧！（事實上我這個就是放php而不是html）
一樣也是enter的事件判斷，
然後將內容以php變數來改。
好像總是網路上找資料，從來沒有發表程式的教學文Orz
有機會我再找個空間來發表專屬的程式教學文好了......
創作內容
javascript 點兩下可修改文字
網頁製作 (0)
但是因為工作只要求IE就算了Orz）
