`
digyso
  • 浏览: 142115 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

表格操作类(添加,删除,排序,上移,下移)

阅读更多

http://www.cnblogs.com/zyh-nhy/archive/2007/08/14/855063.html

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<styletype="text/css">*{}{font-size:14px}button{}{margin:3px}</style>
<scripttype="text/javascript">

varmytable=null,mytable2=null;

window.onload
=function(){
mytable
=newCTable("tbl",10);
mytable2
=newCTable("tbl2",6);
}


Array.prototype.each
=function(f){for(vari=0;i<this.length;i++)f(this[i],i,this)}

function$A(arrayLike){
for(vari=0,ret=[];i<arrayLike.length;i++)ret.push(arrayLike[i]);
returnret
}


Function.prototype.bind
=function(){
var__method=this,args=$A(arguments),object=args.shift();
returnfunction(){
return__method.apply(object,args.concat($A(arguments)));
}

}



functionCTable(id,rows){
this.tbl=typeof(id)=="string"?document.getElementById(id):id;
if(rows&&/^\d+$/.test(rows))this.addrows(rows)
}


CTable.prototype
={
addrows:
function(n){//随机添加n个tr
newArray(n).each(this.add.bind(this))
}
,
add:
function(){//添加1个tr
varself=this;
vartr=self.tbl.insertRow(-1),td1=tr.insertCell(-1),td2=tr.insertCell(-1),td3=tr.insertCell(-1);
varchkbox=document.createElement("INPUT")
chkbox.type
="checkbox"
chkbox.onclick
=self.highlight.bind(self)
td1.appendChild(chkbox)
td1.setAttribute(
"width","35")
td2.innerHTML
=Math.ceil(Math.random()*99)
td3.innerHTML
=Math.ceil(Math.random()*99)
}
,
del:
function(){//删除所选tr
varself=this
$A(self.tbl.rows).each(
function(tr){if(self.getChkBox(tr).checked)tr.parentNode.removeChild(tr)})
}
,
up:
function(){//上移所选tr
varself=this
varupOne=function(tr){//上移1个tr
if(tr.rowIndex>0){
self.swapTr(tr,self.tbl.rows[tr.rowIndex
-1])
self.getChkBox(tr).checked
=true
}

}

vararr=$A(self.tbl.rows).reverse()
if(arr.length>0&&self.getChkBox(arr[arr.length-1]).checked){
for(vari=arr.length-1;i>=0;i--){
if(self.getChkBox(arr[i]).checked){
arr.pop()
}
else{
break
}

}

}

arr.reverse().each(
function(tr){if(self.getChkBox(tr).checked)upOne(tr)});
}
,
down:
function(){
varself=this
vardownOne=function(tr){
if(tr.rowIndex<self.tbl.rows.length-1){
self.swapTr(tr,self.tbl.rows[tr.rowIndex
+1]);
self.getChkBox(tr).checked
=true;
}

}

vararr=$A(self.tbl.rows)

if(arr.length>0&&self.getChkBox(arr[arr.length-1]).checked){
for(vari=arr.length-1;i>=0;i--){
if(self.getChkBox(arr[i]).checked){
arr.pop()
}
else{
break
}

}

}

arr.reverse().each(
function(tr){if(self.getChkBox(tr).checked)downOne(tr)});
}
,
sort:
function(){//排序
varself=this,order=arguments[0];
varsortBy=function(a,b){
if(typeof(order)=="number"){//数字,则按数字指示的列排序
returnNumber(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1;//转化为数字类型比较大小
}
elseif(typeof(order)=="function"){//为程序,按程序的返回结果排序
returnorder(a,b);
}
else{
return1;
}

}

$A(self.tbl.rows).sort(sortBy).each(
function(x){
varcheckStatus=self.getChkBox(x).checked;
self.tbl.firstChild.appendChild(x);
if(checkStatus)self.getChkBox(x).checked=checkStatus;
}
);
}
,
rnd:
function()b

分享到:
评论

相关推荐

    JS实现的表格操作类详解(添加,删除,排序,上移,下移)

    - 排序功能在文档中未明确提及,但根据表格操作类的实现,可以推断出会涉及数组的排序算法。 - 根据列的内容或者行号等属性,可以实现升序或降序的排序逻辑。 11. **兼容性和跨浏览器支持**: - 代码中包含了...

    List控件的应用,删除,添加,上移,下移

    本教程主要探讨List控件的应用,包括如何添加、删除、上移和下移列表中的项。 首先,让我们了解一下List控件的基本概念。MFC中的CListCtrl类是与Windows API的LISTVIEW控件相对应的,它提供了丰富的功能,如自定义...

    发个自己写的表格操作类(添加,删除,排序,上移,下移)

    上移选定行 下移选定行 按第一列数字排序 按每行数据的和排序 随机选择行 添加一行 删除选定行 上移选定行 下移选定行 按第二列数字排序 按每行数据的和排序 [Ctrl+A 全选 注:如需引入外部Js需刷新...

    jquery 实现上下移动元素排序无刷新

    要实现元素的无刷新排序,我们需要监听用户的点击事件,比如在元素上添加一个上移或下移的按钮。当用户点击时,根据当前元素的位置,使用上述DOM操作将其移动到正确的位置。同时,需要更新这些元素的视觉样式,以...

    jquery实现上移下移置顶效果

    本文将深入探讨如何使用jQuery实现元素的上移、下移以及置顶效果,这些功能常用于列表排序或者用户界面动态更新。 ### 1. jQuery基本概念 jQuery的核心在于它的选择器,它允许开发者用CSS语法来选取HTML元素,然后...

    WPF DataGrid 行拖拽

    在Windows Presentation Foundation (WPF)框架中,DataGrid控件是一种强大的数据展示工具,它允许用户以表格形式显示和操作数据。默认情况下,WPF DataGrid的列支持拖放功能,用户可以方便地调整列的位置。然而,...

    editable_static_form.rar_html 增删改

    此外,行列的上移和下移操作需要重新排序表格中的行。这通常涉及获取当前行的索引,根据移动方向调整索引,然后将行对象插入到新的位置。在操作过程中,需要注意保持数据与界面的一致性。 为了提高用户体验,我们...

    StepWidget.rar

    “分步测试添加、上移、下移、删除一行等操作”这部分功能展示了对测试流程的动态管理。添加新测试步骤可能是通过向表格模型添加新的行来实现;上移和下移操作涉及调整行的顺序,这可以通过重新排序模型的行或者交换...

    JavaScript表格常用操作方法汇总

    接着,我们定义了一个全局变量`mytable`,并在`window.onload`事件中初始化,创建了一个名为`CTable`的类实例,用于管理表格的操作。 `CTable`类中包含了几个关键方法: 1. `addrows(n)`:这个方法用于向表格添加...

    jquery做的table行上下移动,互换

    我们可以为每一行添加两个按钮(上移和下移),并绑定jQuery事件处理器: ```html 内容1 内容2 上移 下移 ``` 接下来,我们编写jQuery脚本来实现行的移动: ```javascript $(document).ready(function...

    jquery实现更改表格行顺序示例

    在操作列中,有两个带有“move_btn”类的按钮,分别使用了 Bootstrap 的上箭头和下箭头图标(glyphicon),表示上移和下移行的功能。每个按钮都有一个 `move_act` 属性,用于区分上移还是下移操作,其值分别为 "up" ...

    《程序天下:JavaScript实例自学手册》光盘源码

    21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading...

    程序天下:JavaScript实例自学手册

    21.12 表格操作常用方法 第22章 流行应用:AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading...

    C#中右键通过listview来控制datagridview字段值的是否显示、显示顺序,并存储到XML中

    2. 创建ContextMenuStrip:为ListView创建一个ContextMenuStrip,并添加“显示/隐藏”和“上移/下移”菜单项,这些菜单项将响应用户的右键点击操作。 3. 添加事件处理程序:为ListView的ItemSelectionChanged和...

    edittreegrid-1.5

    通过拖放或者按钮操作,可以方便地将节点在兄弟节点之间上移或下移,以满足不同场景的需求。 2. **添加节点**:用户能够动态地向树形网格中添加新的子节点。这在数据管理和编辑时十分便利,比如在组织结构、文件...

    jQuery分类信息筛选过滤特效代码

    【使用帮助.txt】可能包含了具体的操作指南,包括如何初始化筛选功能,如何添加自定义筛选条件,以及如何绑定上移、下移和置顶的事件。它可能还解释了如何调试和解决可能出现的问题。 【谷普下载.url】和【说明.url...

    江西省贵溪市实验中学2020-2021学年高二下学期期末考试信息技术试题(三校生) .doc

    4. **Word 表格操作**:在Word中,选择表格并按Delete键将删除整个表格,而非仅删除表格内的内容。 5. **Excel 公式输入**:在Excel中,公式="1"+"2"会返回数值3,而不是错误值,因为Excel能自动处理字符串与数字...

    2022年大学计算机基础(-Windows-7+WPS-Office-2019-)试题带答案.docx

    剪切操作可以将选定的文本放到剪贴板上,同时删除原文本。 22. **复制公式后的变化** - 选项**B**正确。当将单元格L2的公式复制到L3时,对应的单元格范围也会相应下移一行。 23. **记录单对话框显示含义** - ...

    全国计算机应用能力考试复习:excel2003试题及答案解析.doc

    29. **排序记录**:了解如何根据指定字段对记录进行排序。 30. **设置自动保存**:学会如何设置工作簿的自动保存时间间隔。 31. **格式化特定文本**:掌握如何设置工作表中特定文本的格式。 32. **计算学生总分**:...

Global site tag (gtag.js) - Google Analytics