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 相关文章推荐
用一段js程序来实现动画功能
Mar 06 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
JavaScript ES6 Class类实现原理详解
May 08 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php 无限级 SelectTree 类
2009/05/19 PHP
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现的快速排序算法详解
2017/08/01 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
django跳转页面传参的实现
2020/09/17 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
生产现场工艺工程师岗位职责
2013/11/28 职场文书
经理助理岗位职责
2014/03/05 职场文书
团购业务员岗位职责
2014/03/15 职场文书
学生个人自我鉴定
2014/03/26 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
村干部任职承诺书
2015/01/21 职场文书
《刷子李》教学反思
2016/02/20 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android