JavaScript簡單表格編輯功能實(shí)現(xiàn)方法
更新時(shí)間：2015年04月16日 10:52:31 作者：令狐不聰
這篇文章主要介紹了JavaScript簡單表格編輯功能實(shí)現(xiàn)方法,涉及javascript操作表格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(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>
希望本文所述對(duì)大家的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對(duì)象中取值，完成初次渲染，在編輯器內(nèi)畫表格
- editable.js 基于jquery的表格的編輯插件
- js+Html實(shí)現(xiàn)表格可編輯操作
相關(guān)文章
JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn)
本文主要介紹了JS中2種定時(shí)器的使用及清除的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
JavaScript詳解類數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理，ES6中引入了迭代器與可迭代對(duì)象的概念，并且提供了對(duì)可迭代對(duì)象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開語法...等。讓我們對(duì)數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化2022-06-06
詳解Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用
本篇文章主要介紹了Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)
在日常的網(wǎng)頁開發(fā)中,我們會(huì)遇到獲取節(jié)點(diǎn)的問題,而js是寫網(wǎng)頁的最基礎(chǔ)的語言,也是最常用的,這篇文章主要給大家介紹了關(guān)于如何使用JS獲取當(dāng)前節(jié)點(diǎn)的兄弟/父/子節(jié)點(diǎn)的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要分享10個(gè)常見的前端手寫功能，防抖、節(jié)流、深拷貝、異步控制并發(fā)數(shù)、繼承等功能技巧，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-02-02
解決LayUI加上form.render()下拉框和單選以及復(fù)選框不出來的問題
今天小編就為大家分享一篇解決LayUI加上form.render()下拉框和單選以及復(fù)選框不出來的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS打字效果的動(dòng)態(tài)菜單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
為了滿足用戶體驗(yàn)度，使用SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框效果非常好，下面通過這篇文章給大家介紹jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框，需要的朋友可以參考下2015-08-08
另類網(wǎng)頁中添加運(yùn)行效果...2006-12-12
這篇文章主要介紹了深入理解 ES6中的 Reflect用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07