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 相关文章推荐
分享几个超级震憾的图片特效
Jan 08 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
护士自我鉴定怎么写
2014/02/07 职场文书
房屋租赁协议书
2014/10/18 职场文书
给上级领导的感谢信
2015/01/22 职场文书
阿甘正传观后感
2015/06/01 职场文书
法律讲堂观后感
2015/06/11 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS