[HTML]HTML5实现可编辑表格
生活随笔
收集整理的這篇文章主要介紹了
[HTML]HTML5实现可编辑表格
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5實現的簡單的可編輯表格
[HTML]代碼
<!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>?
[HTML]代碼
<!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>?
轉載于:https://www.cnblogs.com/lyggqm/p/5627566.html
總結
以上是生活随笔為你收集整理的[HTML]HTML5实现可编辑表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IE中window的模态框与返回值
- 下一篇： 编写高质量代码:Web前端开发修炼之道（