<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> contentEditable属性 </title>
</head>
<body>
<!-- 直接指定contentEditable="true"表明该元素是可编辑的 -->
<div id="cont" contentEditable="true" style="width:500px;border:1px solid black">
疯狂Java讲义
<!-- 该元素的父元素有contentEditable="true"，因此该表格也是可编辑的 -->
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>疯狂Java讲义</td>
<td>疯狂Android讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>经典Java EE企业应用实战</td>
</tr>
</table>
</div>
<input type="button" value="获取" id="getTable"/>
<script type="text/javascript">
var cont=document.getElementById("cont");
var btn=document.getElementById("getTable");
btn.onclick=function(){
//isContentEditable属性，可编辑状态返回ture；否则返回false。
//innerHTML属性获取编辑后的内容
if(cont.isContentEditable){
alert("编辑完成，获取代码："+cont.innerHTML);
//切换不可编辑状态
cont.contentEditable=false;
}else{
alert("不可编辑,切换成可编辑");
//切换可编辑状态
cont.contentEditable=true;
}
};
</script>
<br/>
<hr/>
<!-- 这个表格默认是不可编辑的
双击之后该表格变为可编辑状态 -->
<table id="target"
ondblclick="this.contentEditable=true;"
style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>Java</td>
<td>Ruby</td>
</tr>
<tr>
<td>C/C++</td>
<td>Python</td>
</tr>
</table>
</body>
</html>
