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.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
js 小数取整的函数
May 10 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
基于jquery实现动态竖向柱状条特效
Feb 12 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
javascript中的面向对象
Mar 30 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 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/01/26 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python中的默认参数详解
2015/06/24 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python 发送邮件方法总结
2020/08/10 Python
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android