［代码］HTML5动态添加表格行列并编辑表格内容
2014-02-24 19:29:54 -0500
一个基于HTML5属性的可编辑表格效果，可动态添加表格行或列，双击表格单元格中的数据还可编辑文字，当然也可删除文字，需要动态表格效果的可做下参考。测试请在火狐或Chrome浏览器下进行，IE8无效。
转自源码爱好者
可编辑表格
可编辑的表格
第一列标题
第二列标题
第一行第一列
第一行第二列
<!DOCTYPE html > <html > <head> <meta charset="utf-8" /> <title>可编辑表格</title> <script> function addRow(){ var oTable = document.getElementById("oTable"); var tBodies = oTable.tBodies; var tbody = tBodies[0]; var tr = tbody.insertRow(tbody.rows.length); var td_1 = tr.insertCell(0); td_1.innerHTML = "<div contenteditable='true'>第1列</div>"; var td_2 = tr.insertCell(1); td_2.innerHTML = "<div contenteditable='true'>第2列</div>"; } </script> </head> <body> <fieldset> <legend>可编辑的表格</legend> <table id="oTable" style="background-color:#eeeeee;" bordercolor="#aaaaaa" border="1" cellpadding="0" cellpadding="2" width="100%"> <thead> <tr> <th>第一列标题</th> <th>第二列标题</th> </tr> </thead> <tbody> <tr> <td><div contenteditable="true">第一行第一列</div></td> <td><div contenteditable="true">第一行第二列</div></td> </tr> </tbody> </table> </fieldset> <input type="button" onClick="addRow();" style="font-size:16px;" value="+"/> </body> </html>
csngmap资源分享大本营版权所有 @，磨友转载时请以链接形式注明作者和原始出处！谢谢合作！
«Newer
Older»
Comment:
Name:
Back to home
代码 /cat/111288