标签：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 function getInnerHTML(){ 8 alert(document.getElementById("price1").innerHTML+"\n"+document.getElementById("price2").innerHTML); 9 } 10 </script> 11 </head> 12 <body> 13 <table contenteditable="true"> 14 <tr contenteditable="false"> 15 <td>书籍</td> 16 <td>单价</td> 17 </tr> 18 <tr> 19 <td contenteditable="false">ajax权威指南</td> 20 <td id="price1">10元</td> 21 </tr> 22 <tr> 23 <td contenteditable="false">JavaScript权威指南</td> 24 <td id="price2">20元</td> 25 </tr> 26 <tr> 27 <td><button onclick="getInnerHTML()">提交</button></td> 28 </tr> 29 </table> 30 </body> 31 </html>
contenteditable 属性允许直接编辑html元素的内容，然后可以通过innerHTML获取编辑完后的值
该属性具有继承的特点，也就是说如果父元素设置了为true，那么子元素默认也都是true，除非手动修改为false
页面一旦刷新后，编辑的数据就会恢复成编辑前的
如果想要对页面的全部元素都设置为可编辑的，可以这么干
1 <body ondblclick="document.designMode=‘on‘;"> 2 ....... 3 ....... 4 ....... 5 </body>
标签：
原文地址：http://www.cnblogs.com/sherrykid/p/4591856.html
