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>
时间： 2024-08-15 15:21:01