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 相关文章推荐
javascript中使用css需要注意的地方小结
Sep 01 Javascript
JSON 数字排序多字段排序介绍
Sep 18 Javascript
js中的this关键字详解
Sep 25 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
javascript中递归的两种写法
Jan 17 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
OpenLayers3实现地图显示功能
Sep 25 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php SQL Injection with MySQL
2011/02/27 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
php导出excel格式数据问题
2014/03/11 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
ES6对象操作实例详解
2020/05/23 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python将字符串转换成数组的方法
2015/04/29 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
详解python while 函数及while和for的区别
2018/09/07 Python
django 环境变量配置过程详解
2019/08/06 Python
python opencv进行图像拼接
2020/03/27 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
python 绘制国旗的示例
2020/09/27 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
印度网上药店:1mg
2017/10/13 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
运动会加油稿
2015/07/22 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python