JavaScript簡單表格編輯功能實(shí)現(xiàn)方法
本文實(shí)例講述了JavaScript簡單表格編輯功能實(shí)現(xiàn)方法。分享給大家供大家參考。具體如下:
<html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementById('tr2').insertCell(0) x.innerHTML="Table Row, Table Cell" } function delCell() { document.getElementById('tr2').deleteCell(0) } function deleteCaption() { document.getElementById('myTable').deleteCaption() } function createCaption() { var x=document.getElementById('myTable').createCaption() x.innerHTML="My Table" } function delRow() { document.getElementById('myTable').deleteRow(0) } function insRow() { var x=document.getElementById('myTable').insertRow(0); var y=x.insertCell(0); var z=x.insertCell(1); y.innerHTML="New Cell 1"; z.innerHTML="New Cell 2"; } </script> </head> <body> <center><table id="myTable" border="1"> <tr id="tr2"> <td>Row1 cell1</td> <td>Row1 cell2</td> </tr> <tr id="tr2"> <td>Row2 cell1</td> <td>Row2 cell2</td> </tr> <tr id="tr2"> <td>Row3 cell1</td> <td>Row3 cell2</td> </tr> </table> <br /> <center> <table border="0"> <tr><th colspan="2">Table Controler</th></tr> <tr><td> <center> <input type="button" onclick="createCaption()" value="Create caption"></td><td> <center> <input type="button" onclick="deleteCaption()" value="Delete caption" /> </td></tr> <tr><td colspan="2"> <center> <input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" /> </td></tr> <tr><td> <center> <input type="button" onclick="insRow()" value="Insert row"> </td><td> <center> <input type="button" onclick="delRow()" value="Delete first row"> </td></tr> <tr><td> <center> <input type="button" onclick="insCell()" value="Insert cell"> </td><td> <center> <input type="button" onclick="delCell()" value="Delete cell"> </td></tr> </table> </body> </html>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- Vue.js實(shí)現(xiàn)可編輯的表格
- angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
- vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
- 使用JavaScript實(shí)現(xiàn)表格編輯器(實(shí)例講解)
- jQuery實(shí)現(xiàn)可編輯表格并生成json結(jié)果(實(shí)例代碼)
- JS表格組件BootstrapTable行內(nèi)編輯解決方案x-editable
- javascript實(shí)現(xiàn)表格排序 編輯 拖拽 縮放
- 百度編輯器從Json對象中取值,完成初次渲染,在編輯器內(nèi)畫表格
- editable.js 基于jquery的表格的編輯插件
- js+Html實(shí)現(xiàn)表格可編輯操作
相關(guān)文章
Javascript 中 null、NaN和undefined的區(qū)別總結(jié)
js中的數(shù)據(jù)類型有undefined,boolean,number,string,object等5種,前4種為原始類型,第5種為引用類型,接下來與大家分享下它們之間的區(qū)別2013-04-04用js實(shí)現(xiàn)table單元格高寬調(diào)整,兼容合并單元格(兼容IE6、7、8、FF)實(shí)例
用js實(shí)現(xiàn)table單元格寬度和高度調(diào)整,有合并單元格也可以的.兼容IE6,7,8以及FF,附上代碼css,html,js三部份,有需要的朋友可以參考一下2013-06-06JavaScript錯(cuò)誤處理try..catch...finally+涵蓋throw+TypeError+RangeEr
這篇文章主要介紹了JavaScript錯(cuò)誤處理:try..catch...finally+涵蓋throw+TypeError+RangeError,文章內(nèi)容具有一定的參考價(jià)值,需要的小伙伴可以參考一下,希望對你有所幫助2021-12-12ES6新特性二:Iterator(遍歷器)和for-of循環(huán)詳解
這篇文章主要介紹了ES6新特性二:Iterator(遍歷器)和for-of循環(huán),結(jié)合實(shí)例形式分析了ES6中Iterator(遍歷器)和for-of循環(huán)遍歷操作的相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2017-04-04JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個(gè)彈出層組件,但是可以作為獨(dú)立組件使用,需要的朋友可以參考下2023-10-10js判斷手機(jī)是否安裝并打開app,未安裝則安裝app【兼容Android、ios,親測可用】
這篇文章主要介紹了js判斷手機(jī)是否安裝并打開app,未安裝則安裝app,通過調(diào)用瀏覽器判斷app,兼容Android、ios等系統(tǒng),,需要的朋友可以參考下2023-05-05