JavaScript简单表格编辑功能实现方法
更新时间：2015年04月16日 10:52:31 作者：令狐不聪
这篇文章主要介绍了JavaScript简单表格编辑功能实现方法,涉及javascript操作表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JavaScript简单表格编辑功能实现方法。分享给大家供大家参考。具体如下：
<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程序设计有所帮助。
相关文章
本文主要介绍了JS中2种定时器的使用及清除的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了JavaScript详解类数组与可迭代对象的实现原理，ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for...of循环，Map(iterable)构造器，展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化2022-06-06
本篇文章主要介绍了Webpack实战之构建 Electron 应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
在日常的网页开发中,我们会遇到获取节点的问题,而js是写网页的最基础的语言,也是最常用的,这篇文章主要给大家介绍了关于如何使用JS获取当前节点的兄弟/父/子节点的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要分享10个常见的前端手写功能，防抖、节流、深拷贝、异步控制并发数、继承等功能技巧，具有一定的参考价值，需要的小伙伴可以参考一下2022-02-02
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
今天小编就为大家分享一篇解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS打字效果的动态菜单，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
为了满足用户体验度，使用SweetAlert插件实现响应式提示框效果非常好，下面通过这篇文章给大家介绍jquery SweetAlert插件实现响应式提示框，需要的朋友可以参考下2015-08-08
另类网页中添加运行效果...2006-12-12
这篇文章主要介绍了深入理解 ES6中的 Reflect用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论