table--表格的各种操作--增,删,移动,插入到指定位置
效果图:
源码如下: 方法有备注:
------------------------------------------------------
<!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="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table width="700px;" id="mytable" border="1px;" cellpadding="0px" cellspacing="0px">
<tr height="30px">
<th>账号</th>
<th>密码</th>
<th>操作</th>
</tr>
<tr height="30px">
<td>张三(原始数据)</td>
<td>123</td>
<td>
<a href="#" onclick="addBefore(this)">添加(Before)</a>
<a href="#" onclick="addAfter(this)">添加(After)</a>
<a href="#" onclick="deleteCurrentRow(this)">删除</a>
<a href="#" onclick="moveToUp(this)">上移</a>
<a href="#" onclick="moveToDown(this)">下移</a>
</td>
</tr>
<tr height="30px">
<td>李四(原始数据)</td>
<td>456</td>
<td>
<a href="#" onclick="addBefore(this)">添加(Before)</a>
<a href="#" onclick="addAfter(this)">添加(After)</a>
<a href="#" onclick="deleteCurrentRow(this)">删除</a>
<a href="#" onclick="moveToUp(this)">上移</a>
<a href="#" onclick="moveToDown(this)">下移</a>
</td>
</tr>
<tr height="30px">
<td>赵六(原始数据)</td>
<td>789</td>
<td>
<a href="#" onclick="addBefore(this)">添加(Before)</a>
<a href="#" onclick="addAfter(this)">添加(After)</a>
<a href="#" onclick="deleteCurrentRow(this)">删除</a>
<a href="#" onclick="moveToUp(this)">上移</a>
<a href="#" onclick="moveToDown(this)">下移</a>
</td>
</tr>
</table>
<br />
<input type="button" value="添加到表格中的第一行之前" onclick="addToTableFirst()"/>
<input type="button" value="添加到表格中的最后一行之后" onclick="addToTableLast()"/>
<input type="button" value="添加到第二行" onclick="addToTableTwo()"/>
<script>
/**
在之前进行添加.
*/
var count = 1; //定义全局变量,进行区别,当前是第几个被插入。。。
function addBefore(obj){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
var currentRow = obj.parentNode.parentNode.rowIndex;
//添加行
var new_tr = table.insertRow(currentRow);//新增加一行.
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在之前进行插入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" onclick="addBefore(this)">添加(Before)</a> '+
'<a href="#" onclick="addAfter(this)">添加(After)</a>' +
'<a href="#" onclick="deleteCurrentRow(this)">删除</a>'+
'<a href="#" onclick="moveToUp(this)">上移</a>'+
'<a href="#" onclick="moveToDown(this)">下移</a>';
}
/**
在之后进行插入....
*/
function addAfter(obj){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
var currentRow = obj.parentNode.parentNode.rowIndex;
//添加行
var new_tr = table.insertRow(currentRow+1);//新增加一行.
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在之后进行插入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" onclick="addBefore(this)">添加(Before)</a> '+
'<a href="#" onclick="addAfter(this)">添加(After)</a>' +
'<a href="#" onclick="deleteCurrentRow(this)">删除</a>'+
'<a href="#" onclick="moveToUp(this)">上移</a>'+
'<a href="#" onclick="moveToDown(this)">下移</a>';
}
/**
删除当前行
*/
function deleteCurrentRow(obj){
var row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
var table = document.getElementById("mytable");//获取表格对象
table.deleteRow(row_tr);
}
/**
上移一行
*/
function moveToUp(obj){
var row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
if(row_tr<=1){
alert("已经是第一行了,无法进行移动!");
return;
}
changeRow(row_tr-1,row_tr);
}
/**
下移一行
*/
function moveToDown(obj){
var row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
if(row_tr>=document.getElementById("mytable").rows.length-1){
alert("已经是最后一行了,无法进行移动!");
return;
}
changeRow(row_tr,row_tr+1);
}
/**
交换行
*/
function changeRow(row1,row2){
var table = document.getElementById("mytable");//获取表格对象
if(table.rows[row1].swapNode){//FireFox不可用,IE可用
table.rows[row1].swapNode(table.rows[row2]);
}else{
swapNode(table.rows[row1],table.rows[row2]);
}
}
//交换2个DOM节点---火狐等中实现IE中的swapNode方法
function swapNode(node1,node2)
{
var parent = node1.parentNode;//父节点
var t1 = node1.nextSibling;//两节点的相对位置
var t2 = node2.nextSibling;
//如果是插入到最后就用appendChild
if(t1) parent.insertBefore(node2,t1);
else parent.appendChild(node2);
if(t2) parent.insertBefore(node1,t2);
else parent.appendChild(node1);
}
/**
添加到表格中的第一行
*/
function addToTableFirst(){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
//添加行
var new_tr = table.insertRow(1);//新增加一行.---就在第一行
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在第一行加入..)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" onclick="addBefore(this)">添加(Before)</a> '+
'<a href="#" onclick="addAfter(this)">添加(After)</a>' +
'<a href="#" onclick="deleteCurrentRow(this)">删除</a>'+
'<a href="#" onclick="moveToUp(this)">上移</a>'+
'<a href="#" onclick="moveToDown(this)">下移</a>';
}
/**
添加到表格中的最后一行之后
*/
function addToTableLast(){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
//添加行
var new_tr = table.insertRow(table.rows.length);//新增加一行.---就在第一行
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在最后一行加入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" onclick="addBefore(this)">添加(Before)</a> '+
'<a href="#" onclick="addAfter(this)">添加(After)</a>' +
'<a href="#" onclick="deleteCurrentRow(this)">删除</a>'+
'<a href="#" onclick="moveToUp(this)">上移</a>'+
'<a href="#" onclick="moveToDown(this)">下移</a>';
}
/**
添加到表格中的第二行之后
*/
function addToTableTwo(){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
//添加行
if(table.rows.length<2){
alert("表格行数少于2");
return;
}
var new_tr = table.insertRow(2);//新增加一行.---就在第一行
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在最后一行加入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" onclick="addBefore(this)">添加(Before)</a> '+
'<a href="#" onclick="addAfter(this)">添加(After)</a>' +
'<a href="#" onclick="deleteCurrentRow(this)">删除</a>'+
'<a href="#" onclick="moveToUp(this)">上移</a>'+
'<a href="#" onclick="moveToDown(this)">下移</a>';
}
</script>
</body>
</html>
- 大小: 22.1 KB
分享到:
相关推荐
Source参数可以是一个Command对象名称、一段SQL命令、一个指定的数据表名称或是一个Stored Procedure。假如省略这个参数,系统则采用Recordset对象的Source属性。 ActiveConnection Recordset对象可以通过...
HTML表格(<TABLE>标签) 数据库 导出数据为… CSV文件 HTML文件 其他 自动过滤 单元验证 有条件的格式 合并单元 PaintCell方法:将单元内容渲染到TCanvas对象的 XLSReadWriteII包还包含下列组件: 从任何...
用对象纯源码实现word的操作,纯绿色,无公害. 关于易语言操作word读写或者向word中插入图片的实现,经大量搜索贴子,发现基本思路是明白了(用com对象操作),但是例子代码太少,同时有的代码写法不够严谨或者使用模块等,...
3) 增加上传及插入模板的功能,并在全部内置功能的演示中代替了插入EXCEL表格的功能(由于此功能需要服务器安装office2000,使用环境有限制,所以从演示中去掉,但保留此功能,有需要请自行在配置文件中增加...
FloatingFrames 插入一任意位置的Frame, 就像开窗一般(IE better) Commands 名称 简介 Replicator 使用这个Command 可以复制任何您选种的HTML组件,并可以设定要在 复制的组件中所插入的分割符。 Window ...
用对象纯源码实现word的操作,纯绿色,无公害. 关于 易语言 操作word读写或者向word中插入图片的实现,经大量搜索贴子,发现基本思路是明白了(用com对象操作),但是例子代码太少,同时有的代码写法不够严谨或者使用模块等,...
•HTML表格(<TABLE>标签) •数据库 导出数据为… •CSV文件 •HTML文件 其他 •自动过滤 •单元验证 •有条件的格式 •合并单元 •PaintCell方法:将单元内容渲染到TCanvas对象的 XLSReadWriteII包还包含...
13. 关于不同浏览器背景颜色,鼠标移动或触发颜色变化的设置14、 margin 15、<meta>16、 frameset17、 form在html中的作用18、 表格Table19、 链接20、 关于文字21、 序列22、 关于table 23、……
行移动到新物理页,并从原物理页删除这些行 FILE_HDR_MODIF SQLSERVER增长数据文件大小 BEGIN_XACT 启动一个事务 COMMIT_XACT 提交一个事务 ABORT_XACT 回滚一个事务 MARK_SAVEPOINT 程序发布'SAVE TRANSACTION'...
Linux 操作系统基础教程 清华大学信息学院计算机系 目 录 前言..........................................................................................................................................
19.13 将XML文件绑定到table 19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不...
19.13 将XML文件绑定到table 19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不...
示例描述:本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向.html 设置文字的移动方向。 图片的移动.html 设置图片的移动。 设置移动对象.html 设置设置...
HTML表格(<TABLE>标签) 数据库 导出数据为… CSV文件 HTML文件 其他 自动过滤 单元验证 有条件的格式 合并单元 PaintCell方法:将单元内容渲染到TCanvas对象的 XLSReadWriteII包还包含下列组件: 从任何...
由于光盘上的文件是来自受信任源,您可以将这些文件复制到您的电脑上,然后指定一个文件夹作为受信任位置,要想这样,执行以下操作: 1. 打开一个“资源管理器”窗口,选择包含附带光盘的光驱。 2. 右击带有实例的根...
zip 文件解压到一目录,如何使用,请参照解压后的帮助文件 Help.html 【软件功能】 <1> 以表格的形式显示 Select SQL 语句的查询结果,可以直接对查询结果进行再操作,如修改、插入、删除、保存、多功能拷贝、导出、...
可以直接对查询结果进行再操作,如 修改、插入行、删除行、提交(将表格中的数据改变写入相应的数据库表中)、多功能拷贝、导出为 INSERT 语句、单条记录操作、方便的查找及替换功能、数字统计、行列移动、列排序、...
Table Of Contents 1. 简介 7 2. 使用入门 8 2.1 教程 8 2.1.1 概述 8 2.1.2 支架和旋钮教程 9 2.1.3 涡轮教程 24 2.2 SpaceClaim 界面 24 2.2.1 概述 24 2.2.2 结构树 26 2.2.3 图层 27 2.2.4 选择 29 2.2.5 组 30 ...