テーブル内容を編集できるようにする

■動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows × - × ○ ○ × ×
Macintosh × × × - - × ×
UNIX - - - - - × ×

解　　説 　タグにcontentEditable属性を指定するとタグで囲まれた範囲が編集できるようになります。ただし、テーブルタグ関連（table, col, colgroup, tbody, td, tfoot, th, thead, tr）は、この属性を指定できません。このためテーブル内容を編集できるようにするためにはdivまたはspanタグで編集する範囲を囲んでおきます。JavaScriptで制御するには「オブジェクト名.contentEditable = 設定値」のようにします。設定値はtrueが編集可能、falseが編集不可、inheritが親オブジェクトの状態を継承する、となっています。
コード <html> <head> <title>テーブル内容を編集できるようにする</title> </head> <body> <form> <input type="button" value="編集可能にする" onClick="myTD.contentEditable=true"> <input type="button" value="編集不可能にする" onClick="myTD.contentEditable=false"> </form> <table width="400" bgColor="#FFA080"> <tr><td><div id="myTD" contentEditable>ここが編集できます</div></td></tr> </table> </body> </html>

■サンプルスクリプトを実行する　>>実行
 ■各ブラウザでの動作結果を見る　>>View!