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判断IE版本的代码 超管用!
Aug 09 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
js滚动条多种样式,推荐
2007/02/05 Javascript
jQuery toggle()设置CSS样式
2009/11/05 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
微信小程序入门教程
2016/11/18 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
python常见数制转换实例分析
2015/05/09 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python bytes string相互转换过程解析
2020/03/05 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
同事打架检讨书
2014/02/04 职场文书
情人节寄语大全
2014/04/11 职场文书
泰山导游词
2015/02/02 职场文书
百万英镑观后感
2015/06/09 职场文书