JavaScript简单表格编辑功能实现方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • javascript清空table表格的方法

    本文实例讲述了javascript清空table表格的方法.分享给大家供大家参考.具体如下: 1. 通常方法 循环table的rows,然后一个一个删除. 这个方法是通常的方法,可行,但是效率不好. 2. 另一个方法 var artTable = document.getElementById("artical_table"); console.debug(artTable.getElementsByTagName("thead")[0]); var artBody

  • javascript 动态创建表格

    复制代码 代码如下: <html>         <head>             <script>                 function createTable(rows,lines){                     this.rows=rows;                     this.lines=lines;                     var Body=document.getElementById('body'

  • JavaScript实现自动变换表格边框颜色

    代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码</title> </head> <body> <table border="0" width="261" id="change_jb51_net" style="border

  • JavaScript表格常用操作方法汇总

    本文实例汇总了JavaScript表格常用操作方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <

  • JavaScript实现表格点击排序的方法

    本文实例讲述了JavaScript实现表格点击排序的方法.分享给大家供大家参考.具体分析如下: 这里实现基于JS的表格点击排序效果,可以根据表格内的数据大小自动按顺序排列,股票网站常会见到这种功能. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表格排序</title> <

  • javascript操作表格排序实例分析

    本文实例讲述了javascript操作表格排序的方法.分享给大家供大家参考.具体如下: 完整例子如下: <html> <head> <title>Table Sort Example</title> <script type="text/javascript"> //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { swit

  • javascript实现table表格隔行变色的方法

    本文实例讲述了javascript实现table表格隔行变色的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title

  • javascript实现通过表格绘制颜色填充矩形的方法

    本文实例讲述了javascript实现通过表格绘制颜色填充矩形的方法.分享给大家供大家参考.具体如下: <html> <head> <title> Javascript画矩形 </title> <script type="text/javascript"> //定义函数,传入设置参数,返回一个有背景颜色的表格 function drawFilledRect(x,y,w,h,color) { document.write(&qu

  • Javascript动态创建表格及删除行列的方法

    本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • JavaScript简单表格编辑功能实现方法

    本文实例讲述了JavaScript简单表格编辑功能实现方法.分享给大家供大家参考.具体如下: <html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementB

  • Python简单实现enum功能的方法

    本文实例讲述了Python简单实现enum功能的方法.分享给大家供大家参考,具体如下: class Enumerate(object): def __init__(self,names): for number,name in enumerate(names.split()): setattr(self, name, number) codes = Enumerate('FOO BAR BAZ') print codes.FOO codes.FOO = 10 print codes.FOO 更多

  • jQuery基于扩展简单实现倒计时功能的方法

    本文实例讲述了jQuery基于扩展简单实现倒计时功能的方法.分享给大家供大家参考,具体如下: jQuery.fn.countDown = function(settings,to) { settings = jQuery.extend({ startFontSize: '36px', endFontSize: '12px', duration: 1000, startNumber: 10, endNumber: 0, callBack: function() { } }, settings);

  • javascript简单比较日期大小的方法

    本文实例讲述了javascript简单比较日期大小的方法.分享给大家供大家参考,具体如下: //获取起始日期 var startDate=document.all.startdate.value; //转换为日期格式 startDate=startDate.replace(/-/g,"/"); //获取结束日期 var endDate=document.all.enddate.value; endDate=endDate.replace(/-/g,"/"); //如

  • javascript简单进制转换实现方法

    本文实例讲述了javascript简单进制转换实现方法.分享给大家供大家参考,具体如下: JavaScript下的进制转换非常方便,系统已经提供内置方法,提供2-36进制间的转型.直接提供表示的有8进制.10进制.16进制. var w=function(s){document.write('<br>'+s)}; //十进制转其他 var x=110; w(x); w(x.toString(8)); w(x.toString(32)); w(x.toString(16)); //其他转十进制

  • javascript如何创建表格(javascript绘制表格的二种方法)

    1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加到index的那一行前,比如insertRow(0),是将新行添加到第一行之前.默认的insertRow()函数相当于insertRow(-1),将新行添加到表的最后.一般我们在使用的时候都是:objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行. i

  • 前端JavaScript实现本地模糊搜索功能的方法实例

    目录 一.项目前景 二.涉及知识点 Object.assign()的用法 filter()方法 indexOf()模糊查询 DEMO完整代码如下: 总结 一.项目前景 随着vue.react在实际开发中应运越来越广泛,前端对数据的处理越来越多.这篇文章主要目的就是为了对服务端返回的数据进行处理,按照条件进行模糊查询,从而减少向服务端发送请求的次数,来提高性能和用户体验.下面以一个简单的DEMO,来实现模糊查询的功能: 测试用的数据如下: var data = [{ "title": &

  • javascript实现添加附件功能的方法

    javascript实现添加附件功能的方法

    在邮件中我们经常用到添加附件,现在简单的应用下: 效果图: 实现原理: 采用table标签的,主要思想:采用table标签方式 1.点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之后,可以insertRow() insertCell())创建行和列 2.删除的时候通过父节点来移除 核心代码: function creatMail(){ var tab=document.getElementById("tabid"); var tr=tab.insertRow();/

  • jQuery仿Excel表格编辑功能的实现代码

    在 Excel 中可进行的操作,你几乎都可以在网页中做到,如拖动复制.Ctrl+C .Ctrl+V 等等. 另外在浏览器支持方面,它支持以下的浏览器 IE7+, FF, Chrome, Safari, Opera. 如何使用:     首先在页面中引入 jQuery 框架和 Handsontable 插件的相关 JS 和 CSS 文件,以下列出的两个是必要的,还有其它的是可选的,如果需要某个功能时就(参看demo)加上. 复制代码 代码如下: <script src="jquery.min

  • javascript打印html内容功能的方法示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐