热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jstableselectcheckbox操作

1.判断select选项中是否存在ValueparaValue的ItemfunctionjsSelectIsExitItem(objSelect,objItemValue)
//1.判断select选项中 是否存在Value="paraValue"的Item

function jsSelectIsExitItem(objSelect,objItemValue)

{

var isExit = false;

for(var i=0;i
{

if(objSelect.options[i].value == objItemValue)

{

isExit = true;

break;

}

}

return isExit;

}



//2.向select选项中 加入一个Item

function jsAddItemToSelect(objSelect,objItemText,objItemValue)

{

//判断是否存在

if(jsSelectIsExitItem(objSelect,objItemValue))

{

alert("该Item的Value值已经存在");

}

else

{

var varItem = new Option(objItemText,objItemValue);

// objSelect.options[objSelect.options.length] = varItem;

objSelect.options.add(varItem);

alert("成功加入");

}

}



//3.从select选项中 删除一个Item

function jsRemoveItemFromSelect(objSelect,objItemValue)

{

//判断是否存在

if(jsSelectIsExitItem(objSelect,objItemValue))

{

for(var i=0;i
{

if(objSelect.options[i].value == objItemValue)

{

objSelect.options.remove(i);

break;

}

}

alert("成功删除");

}

else

{

alert("该select中 不存在该项");

}

}



//4.修改select选项中 value="paraValue"的text为"paraText"

function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)

{

//判断是否存在

if(jsSelectIsExitItem(objSelect,objItemValue))

{

for(var i=0;i
{

if(objSelect.options[i].value == objItemValue)

{

objSelect.options[i].text = objItemText;

break;

}

}

alert("成功修改");

}

else

{

alert("该select中 不存在该项");

}

}



//5.设置select中text="paraText"的第一个Item为选中

function jsSelectItemByValue(objSelect,objItemText)

{

//判断是否存在

var isExit = false;

for(var i=0;i
{

if(objSelect.options[i].text == objItemText)

{

objSelect.options[i].selected = true;

isExit = true;

break;

}

}

//Show出结果

if(isExit)

{

alert("成功选中");

}

else

{

alert("该select中 不存在该项");

}

}



//6.设置select中value="paraValue"的Item为选中

//document.all.objSelect.value = objItemValue;



//7.得到select的当前选中项的value

//var currSelectValue = document.all.objSelect.value;



//8.得到select的当前选中项的text

//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;



//9.得到select的当前选中项的Index

//var currSelectIndex = document.all.objSelect.selectedIndex;



//10.清空select的项

// document.all.objSelect.options.length = 0;



/



向Select里添加Option

function fnAddItem(text,value)

{

var selTarget = document.getElementById("selID");



selTarget.Add(new Option("text","value"));

}





2、删除Select里的Option

function fnRemoveItem()

{

var selTarget = document.getElementById("selID");



if(selTarget.selectedIndex > -1)

{//说明选中

for(var i=0;i
{

if(selTarget.options[i].selected)

{

selTarget.remove(i);



i = i - 1;//注意这一行

}

}

}

}

3、移动Select里的Option到另一个Select中

function fnMove(fromSelectID,toSelectID)

{

var from = document.getElementById(fromSelectID);

var to = document.getElementById(toSelectID);



for(var i=0;i
{

if(from.options[i].selected)

{

to.appendChild(from.options[i]);

i = i - 1;

}

}

}

if 里的代码也可用下面几句代码代替



var op = from.options[i];

to.options.add(new Option(op.text, op.value));

from.remove(i);

4、Select里Option的上下移动

function fnUp()

{

var sel = document.getElementById("selID");

for(var i=1; i
{//最上面的一个不需要移动,所以直接从i=1开始

if(sel.options[i].selected)

{

if(!sel.options.item(i-1).selected)

{//上面的一项没选中,上下交换

var selText = sel.options[i].text;

var selValue = sel.options[i].value;



sel.options[i].text = sel.options[i-1].text;

sel.options[i].value = sel.options[i-1].value;

sel.options[i].selected = false;



sel.options[i-1].text = selText;

sel.options[i-1].value = selValue;

sel.options[i-1].selected=true;

}

}

}

}

在进行上下两项互换时,也可以使用以下代码,但是效率很低,因为每一次的Dom操作都将导致整个页面的重新布局,所以不如直接修改元素的属性值。

var oOption = sel.options[i]

var oPrevOption = sel.options[i-1]

sel.insertBefore(oOption,oPrevOption);

向下移动同理

function fnDown()

{

var sel = fnGetTarget("selLeftOrRight");

for(var i=sel.length -2; i >= 0; i--)

{//向下移动,最后一个不需要处理,所以直接从倒数第二个开始

if(sel.options.item(i).selected)

{

if(!sel.options.item(i+1).selected)

{//下面的Option没选中,上下互换

var selText = sel.options.item(i).text;

var selValue = sel.options.item(i).value;



sel.options.item(i).text = sel.options.item(i+1).text;

sel.options.item(i).value = sel.options.item(i+1).value;

sel.options.item(i).selected = false;



sel.options.item(i+1).text = selText;

sel.options.item(i+1).value = selValue;

sel.options.item(i+1).selected=true;

}

}

}

}

5、Select里Option的排序

这里借助Array对象的sort方法进行操作,sort方法接受一个function参数,可以在这个function里定义排序时使用的算法逻辑。

array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2)&#xff0c;sort操作进行时&#xff0c;array对象会每次传两个值进去&#xff0c;进行比较&#xff1b; compareFunciton必须返回一个整数值&#xff1a;当返回值>0时&#xff0c;p1会排在p2后面&#xff1b;返回值<0时&#xff0c;p1会排在p2前面&#xff1b;返回值&#61;0 时&#xff0c;不进行操作。

例如&#xff1a;

function fnCompare(a,b)

{

if (a
return -1;

if (a > b)

return 1;

return 0;

}

var arr &#61; new Array();

//add some value into arr

arr.sort(fnCompare);

//这里sort的操作结果就是arr里的项按由小到大的升序排序

//如果把fnCompare里改为

//if (a
// return 1;

//if (a > b)

// return -1;

//return 0;

//则sort的结果是降序排列



好&#xff0c;下面就是对Select里Option的排序

//因为排序可以按Option的Value排序&#xff0c;也可以按Text排序&#xff0c;这里只演示按Value排序

function sortItem()

{

var sel &#61; document.getElementById("selID");

var selLength &#61; sel.options.length;

var arr &#61; new Array();

var arrLength;



//将所有Option放入array

for(var i&#61;0;i
{

arr[i] &#61; sel.options[i];

}

arrLength &#61; arr.length;



arr.sort(fnSortByValue);//排序

//先将原先的Option删除

while(selLength--)

{

sel.options[selLength] &#61; null;

}

//将经过排序的Option放回Select中

for(i&#61;0;i
{

sel.add(new Option(arr[i].text,arr[i].value));

}

}

function fnSortByValue(a,b)

{

var aComp &#61; a.value.toString();

var bComp &#61; b.value.toString();



if (aComp
return -1;

if (aComp > bComp)

return 1;

return 0;

}



&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;



/********************************

* table methods

*********************************/

bes.table&#61;{

//find whether there be one selected checkbox

checkHasSelectedBoxes:function(ele, name){

var table &#61; bes.table.getParentTable(ele);

if(!table)return false;

var chks &#61; bes.table.getFirstCheckboxes(table, name);

if(!chks)return false;

if(chks.length <1)return false;

if(chks.length &#61;&#61; 1 && chks[0] &#61;&#61; ele)return false;

for(var i&#61;0;i
if(!chks[i].disabled)return true;

}

return false;

},

//get all selected checkboxs

getSelectedCheckboxs:function(table, name){

var chks &#61; this.getFirstCheckboxes(table, name);

var arr &#61; new Array();

for(var i &#61; 0; i
if(!chks[i].checked)continue;

arr[arr.length] &#61; chks[i];

}

return arr;

},

//get all checkboxes(selected or not)

getCheckboxSelects:function(table, name){

var chks &#61; this.getFirstCheckboxes(table, name);

return chks.slice(0, chks.length - 1);

},

//get checkbox in the first cell of head rows

getCheckboxAllSelect:function(table, name){

var chks &#61; this.getFirstCheckboxes(table, name);

return chks[chks.length - 1];

},

//get table checkbox selection status, with has checked and all checked status

getCheckboxStatus:function(table, name, checkbox){

var chks &#61; this.getFirstCheckboxes(table, name);

var allCheck &#61; chks[chks.length-1];

allCheck.checked&#61;checkbox?checkbox.checked:true;

var hasChecked &#61; false;

for(var i &#61; chks.length - 2; i >&#61;0; i --){

if(chks[i].disabled)continue;

if(chks[i].checked){

hasChecked&#61;true;

}else{

allCheck.checked &#61; false;

}

}

return {

allChecked:allCheck.checked,

hasChecked:hasChecked

};

},

//

selectCheckboxAll:function(checkbox, name){

var table &#61; this.getParentTable(checkbox);

var chks &#61; this.getFirstCheckboxes(table, name);

for(var i &#61; chks.length - 2; i >&#61;0; i --){

if(chks[i].disabled)continue;

this.selectCheckbox(chks[i], checkbox.checked);

}

},

selectCheckbox:function(chk, checked){

var c &#61; checked;

if(null &#61;&#61; checked)c &#61; chk.checked;

var row &#61; this.getParentNode(chk, "TR");

if(c){

bes.addClass(row, "SelectedRow");

}else{

bes.delClass(row, "SelectedRow");

}

row._selected_ &#61; c;

if(null !&#61; checked)chk.checked &#61; checked;

},

onSelectCheckbox:function(checkbox){

this.selectCheckbox(checkbox);

var table &#61; this.getParentTable(checkbox);

return this.getCheckboxStatus(table, checkbox.name, checkbox);

},

getParentNode:function(node, tag){

do{

if(node.tagName)if(node.tagName.toUpperCase()&#61;&#61;tag){

return node;

}

node &#61; node.parentNode;

}while(node);

return false;

},

getParentTable:function(node){

return bes.table.getParentNode(node, "TABLE");

},

getFirstCheckboxes:function(table, name){

var rs &#61; table.rows;

var chks &#61; new Array();

var chkAll &#61; false;

for(var i&#61;0; i
var cs &#61; rs[i].cells;

for(var j&#61;0; j <2 && j
var ns &#61; cs[j].childNodes;

for(var k&#61;0; k
var n &#61; ns[k];

if(n.type!&#61;"checkbox")continue;

if(n.name!&#61;name){

if(!chkAll && i &#61;&#61; 0 && (!n.name || n.name&#61;&#61;"")){

chkAll &#61; n;

}

continue;

}

chks.push(n);

ns&#61;false;

break;

}

if(!ns)break;

}

}

chks.push(chkAll);

return chks;

},

getSorter:function(table, thbase){

if(table.data)return table.data;

table.$ &#61; table.getElementsByTagName;

function parseInner(inner){

inner &#61; inner &#43; "";

var idx &#61; inner.indexOf("", "").replaceAll(" ", " ").trim()];

}

function sortChar(asc){

return " " &#43; String.fromCharCode(9655 - 5 * asc) &#43; ""

}

function getTableHeaders(table, thbase){

var headers &#61; table.$("THEAD")[0].getElementsByTagName("TR")[0].getElementsByTagName("TH");

for(var i &#61; 0; i
var h &#61; headers[i];

var d &#61; parseInner(h.innerHTML);

if(d.length <2)continue;

d &#61; {

label:d[0],

type:d[1],

idx:i

};

d.sort&#61;0;//0 --null/1 --asc/-1 --desc

h.d &#61; d;

h.d.table &#61; table;

h.innerHTML&#61;d.label;

h.οnclick&#61;function(){

if(!this.d)return;

this.d.table.data.sort(this.d.idx);

}

}

for(var i &#61; 0; i
var h &#61; headers[i];

if(!h.d)continue;

if(h.d.type.charAt(0) &#61;&#61; "&"){

var v &#61; parseInt(h.d.type.substring(1)) &#43; thbase;

v &#61; headers[v];

if(v.d){

h.d.as &#61; v;

}else{

h.d &#61; false;

}

}

}

return headers;

}

function getTableRows(table){

table.data.tbody &#61; table.$("TBODY")[0];

var rows &#61; table.data.tbody.getElementsByTagName("TR");

table.data.rows &#61; [];

var headers &#61; table.data.headers;

for(var i &#61; 0; i
var row &#61; rows[i];

table.data.rows.push(row);

row.cs &#61; row.getElementsByTagName("TD");

for(var j&#61;0; j
var h &#61; headers[j];

if(!h || !h.d || h.d.as)continue;

var c &#61; row.cs[j];

c.v &#61; parseInner(c.innerHTML);

if(c.v.length <2){

c.v &#61; c.v[0];

}else{

c.v &#61; c.v[1];

}

if(h.d.type &#61;&#61; "num"){

try{

c.v &#61; parseInt(c.v);

}catch(e){

c.v &#61; null;

}

if(isNaN(c.v))c.v&#61;null;

}

}

}

}

table.data &#61; {

headers:getTableHeaders(table, thbase?thbase:0)

};

getTableRows(table);

table.data.sorter &#61; function(r1, r2){

var ss &#61; table.data.sorters;

for(var i &#61; 0; i
var d &#61; ss[i].d;

var v1 &#61; r1.cs[d.idx].v;

var v2 &#61; r2.cs[d.idx].v;

if(v1 &#61;&#61; v2)continue;

if(!v1)return -1 * d.sort;

if(!v2)return 1 * d.sort;

return (v1 > v2?1:-1) * d.sort;

}

return 0;

};

table.data.sorters &#61; [];

table.data.rowsort &#61; function(){//[h...]

var hs &#61; table.data.sorters;

for(var i &#61; hs.length - 1; i >&#61; 0; i --){

var h &#61; hs[i];

if(i&#61;&#61;0){

h.innerHTML &#61; h.d.label &#43; sortChar(h.d.sort);

}else{

h.innerHTML &#61; h.d.label;

}

}

this.rows.sort(this.sorter);

};

table.data.initSorters &#61; function(opts){

var hs &#61; [].concat(this.sorters);

hs.reverse();

for(var i&#61;opts.length - 1; i >&#61;0; i --){

var opt &#61; opts[i];

if(!opt && opt !&#61; 0)continue

if(!opt.idx){

opt&#61;{

idx:opt

};

}

if(!opt.sort){

opt.sort&#61;"r";

}

var h &#61; this.headers[opt.idx];

if(!h.d)continue;

if(h.d.as)h&#61;h.d.as;

for(var j &#61; 0; j
if(hs[j] &#61;&#61; h)hs[j] &#61; false;

}

switch(opt.sort){

case "a": h.d.sort&#61;1; break;

case "d": h.d.sort&#61;-1; break;

default://r

if(h.d.sort &#61;&#61; 0){

h.d.sort&#61;1;

}else {

h.d.sort&#61;0 - h.d.sort;

}

}

hs.push(h);

}

this.sorters &#61; [];

for(var i &#61; hs.length - 1; i >&#61; 0; i --){

var h &#61; hs[i];

if(!h)continue;

this.sorters.push(h);

}

};

table.data.sort &#61; function(){

this.initSorters(arguments);

this.rowsort();

var inputs &#61; table.$("INPUT");

var selected &#61; [];

for(var i &#61; 0; i
var ipt &#61; inputs[i];

if(ipt.checked)selected.push(ipt);

}

//rebuild table

for(var i &#61; 0; i
var r &#61; this.rows[i];

this.tbody.removeChild(r);

this.tbody.appendChild(r);

bes.delClass(r, "Row" &#43; (i % 2 - 1));

bes.addClass(r, "Row" &#43; (i % 2));

}

for(var i &#61; 0; i
selected[i].checked &#61; true;

}

};

return table.data;

},

initSorter:function(ele, thbase, thidx){

var t &#61;bes.table.getParentTable(ele);

bes.table.getSorter(t, thbase);

t.data.sort(thbase &#43; thidx);

},

currow:null,

overRow:function(row){

if(this.currow)this.outRow(this.currow);

this.currow &#61; row;

bes.addClass(row, "CurrentRow");

},

outRow:function(row){

bes.delClass(row, "CurrentRow");

this.currow &#61; null;

}

}



&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;&#61;

/********************************

* remove rows of properties table

*********************************/

bes.removeRow&#61;function(table,name){

try{

for(var i&#61;table.rows.length - 1; i > 0 ; i --){

var row &#61; table.rows[i];

var chx &#61; row.cells[0].childNodes[0];

if(null !&#61; chx && chx.checked){

table.deleteRow(i);

}else if(row._selected_){

table.deleteRow(i);

}

}

var status&#61;bes.table.getCheckboxAllSelect(table,name);

bes.table.selectCheckbox(status, false);

}catch(e){}

bes.setRowClass(table);

}

/********************************

* remove all rows of Properties table

*********************************/

bes.removeAllRows&#61;function(table,name){

try{

for(var i&#61;table.rows.length - 1; i > 0 ; i --){

table.deleteRow(i);

}

var status&#61;bes.table.getCheckboxAllSelect(table,name);

bes.table.selectCheckbox(status, false);

}catch(e){}

}
推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 前景:当UI一个查询条件为多项选择,或录入多个条件的时候,比如查询所有名称里面包含以下动态条件,需要模糊查询里面每一项时比如是这样一个数组条件:newstring[]{兴业银行, ... [详细]
  • 本文讨论了如何使用IF函数从基于有限输入列表的有限输出列表中获取输出,并提出了是否有更快/更有效的执行代码的方法。作者希望了解是否有办法缩短代码,并从自我开发的角度来看是否有更好的方法。提供的代码可以按原样工作,但作者想知道是否有更好的方法来执行这样的任务。 ... [详细]
  • 本文详细介绍了如何使用MySQL来显示SQL语句的执行时间,并通过MySQL Query Profiler获取CPU和内存使用量以及系统锁和表锁的时间。同时介绍了效能分析的三种方法:瓶颈分析、工作负载分析和基于比率的分析。 ... [详细]
  • 第四章高阶函数(参数传递、高阶函数、lambda表达式)(python进阶)的讲解和应用
    本文主要讲解了第四章高阶函数(参数传递、高阶函数、lambda表达式)的相关知识,包括函数参数传递机制和赋值机制、引用传递的概念和应用、默认参数的定义和使用等内容。同时介绍了高阶函数和lambda表达式的概念,并给出了一些实例代码进行演示。对于想要进一步提升python编程能力的读者来说,本文将是一个不错的学习资料。 ... [详细]
  • 本文介绍了在处理不规则数据时如何使用Python自动提取文本中的时间日期,包括使用dateutil.parser模块统一日期字符串格式和使用datefinder模块提取日期。同时,还介绍了一段使用正则表达式的代码,可以支持中文日期和一些特殊的时间识别,例如'2012年12月12日'、'3小时前'、'在2012/12/13哈哈'等。 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 超级简单加解密工具的方案和功能
    本文介绍了一个超级简单的加解密工具的方案和功能。该工具可以读取文件头,并根据特定长度进行加密,加密后将加密部分写入源文件。同时,该工具也支持解密操作。加密和解密过程是可逆的。本文还提到了一些相关的功能和使用方法,并给出了Python代码示例。 ... [详细]
  • 颜色迁移(reinhard VS welsh)
    不要谈什么天分,运气,你需要的是一个截稿日,以及一个不交稿就能打爆你狗头的人,然后你就会被自己的才华吓到。------ ... [详细]
  • 正则表达式及其范例
    为什么80%的码农都做不了架构师?一、前言部分控制台输入的字符串,编译成java字符串之后才送进内存,比如控制台打\, ... [详细]
  • 前言:拿到一个案例,去分析:它该是做分类还是做回归,哪部分该做分类,哪部分该做回归,哪部分该做优化,它们的目标值分别是什么。再挑影响因素,哪些和分类有关的影响因素,哪些和回归有关的 ... [详细]
  • 在本教程中,我们将看到如何使用FLASK制作第一个用于机器学习模型的RESTAPI。我们将从创建机器学习模型开始。然后,我们将看到使用Flask创建AP ... [详细]
  • 8.2location对象location对象既是window对象的属性,也是document对象的属性.window.location和document.location引用的是同一个对象. ... [详细]
author-avatar
phperint
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有