JavaScript简单表格编辑功能实现方法


Posted in Javascript onApril 16, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 #Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 #Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 #Javascript
JQuery跳出each循环的方法
Apr 16 #Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 #Javascript
jQuery Ajax中的事件详细介绍
Apr 16 #Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 #Javascript
You might like
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
Prototype Class对象学习
2009/07/19 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Python群发邮件实例代码
2014/01/03 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python中的时区问题
2021/01/14 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
介绍一下如何优化MySql
2016/12/20 面试题
见习报告的格式
2014/10/31 职场文书
工作检讨书大全
2015/01/26 职场文书
仰望星空观后感
2015/06/10 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python