//1.判断select选项中 是否存在Value="paraValue"的Item
function jsSelectIsExitItem(objSelect,objItemValue)
{
var isExit = false;
for(var i=0;i<objSelect.options.length;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<objSelect.options.length;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<objSelect.options.length;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<objSelect.options.length;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<selTarget.options.length;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<from.options.length;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 < sel.length; 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)，sort操作进行时，array对象会每次传两个值进去，进行比较； compareFunciton必须返回一个整数值：当返回值>0时，p1会排在p2后面；返回值<0时，p1会排在p2前面；返回值=0 时，不进行操作。
例如：
function fnCompare(a,b)
{
if (a < b)
return -1;
if (a > b)
return 1;
return 0;
}
var arr = new Array();
//add some value into arr
arr.sort(fnCompare);
//这里sort的操作结果就是arr里的项按由小到大的升序排序
//如果把fnCompare里改为
//if (a < b)
// return 1;
//if (a > b)
// return -1;
//return 0;
//则sort的结果是降序排列
好，下面就是对Select里Option的排序
//因为排序可以按Option的Value排序，也可以按Text排序，这里只演示按Value排序
function sortItem()
{
var sel = document.getElementById("selID");
var selLength = sel.options.length;
var arr = new Array();
var arrLength;
//将所有Option放入array
for(var i=0;i<selLength;i++)
{
arr[i] = sel.options[i];
}
arrLength = arr.length;
arr.sort(fnSortByValue);//排序
//先将原先的Option删除
while(selLength--)
{
sel.options[selLength] = null;
}
//将经过排序的Option放回Select中
for(i=0;i<arrLength;i++)
{
sel.add(new Option(arr[i].text,arr[i].value));
}
}
function fnSortByValue(a,b)
{
var aComp = a.value.toString();
var bComp = b.value.toString();
if (aComp < bComp)
return -1;
if (aComp > bComp)
return 1;
return 0;
}
==========================================
/********************************
* table methods
*********************************/
bes.table={
//find whether there be one selected checkbox
checkHasSelectedBoxes:function(ele, name){
var table = bes.table.getParentTable(ele);
if(!table)return false;
var chks = bes.table.getFirstCheckboxes(table, name);
if(!chks)return false;
if(chks.length < 1)return false;
if(chks.length == 1 && chks[0] == ele)return false;
for(var i=0;i<chks.length-1;i++){
if(!chks[i].disabled)return true;
}
return false;
},
//get all selected checkboxs
getSelectedCheckboxs:function(table, name){
var chks = this.getFirstCheckboxes(table, name);
var arr = new Array();
for(var i = 0; i < chks.length-1; i ++){
if(!chks[i].checked)continue;
arr[arr.length] = chks[i];
}
return arr;
},
//get all checkboxes(selected or not)
getCheckboxSelects:function(table, name){
var chks = 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 = 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 = this.getFirstCheckboxes(table, name);
var allCheck = chks[chks.length-1];
allCheck.checked=checkbox?checkbox.checked:true;
var hasChecked = false;
for(var i = chks.length - 2; i >=0; i --){
if(chks[i].disabled)continue;
if(chks[i].checked){
hasChecked=true;
}else{
allCheck.checked = false;
}
}
return {
allChecked:allCheck.checked,
hasChecked:hasChecked
};
},
//
selectCheckboxAll:function(checkbox, name){
var table = this.getParentTable(checkbox);
var chks = this.getFirstCheckboxes(table, name);
for(var i = chks.length - 2; i >=0; i --){
if(chks[i].disabled)continue;
this.selectCheckbox(chks[i], checkbox.checked);
}
},
selectCheckbox:function(chk, checked){
var c = checked;
if(null == checked)c = chk.checked;
var row = this.getParentNode(chk, "TR");
if(c){
bes.addClass(row, "SelectedRow");
}else{
bes.delClass(row, "SelectedRow");
}
row._selected_ = c;
if(null != checked)chk.checked = checked;
},
onSelectCheckbox:function(checkbox){
this.selectCheckbox(checkbox);
var table = this.getParentTable(checkbox);
return this.getCheckboxStatus(table, checkbox.name, checkbox);
},
getParentNode:function(node, tag){
do{
if(node.tagName)if(node.tagName.toUpperCase()==tag){
return node;
}
node = node.parentNode;
}while(node);
return false;
},
getParentTable:function(node){
return bes.table.getParentNode(node, "TABLE");
},
getFirstCheckboxes:function(table, name){
var rs = table.rows;
var chks = new Array();
var chkAll = false;
for(var i=0; i < rs.length; i ++){
var cs = rs[i].cells;
for(var j=0; j < 2 && j < cs.length; j ++){
var ns = cs[j].childNodes;
for(var k=0; k<ns.length; k ++){
var n = ns[k];
if(n.type!="checkbox")continue;
if(n.name!=name){
if(!chkAll && i == 0 && (!n.name || n.name=="")){
chkAll = n;
}
continue;
}
chks.push(n);
ns=false;
break;
}
if(!ns)break;
}
}
chks.push(chkAll);
return chks;
},
getSorter:function(table, thbase){
if(table.data)return table.data;
table.$ = table.getElementsByTagName;
function parseInner(inner){
inner = inner + "";
var idx = inner.indexOf("<!--");
if(idx < 0)return [inner];
return [inner.substring(0, idx).split(" ").join(" ").trim(),
inner.substring(idx + 4).replace("-->", "").replaceAll(" ", " ").trim()];
}
function sortChar(asc){
return " <span class='TableSorter'>" + String.fromCharCode(9655 - 5 * asc) + "</span>"
}
function getTableHeaders(table, thbase){
var headers = table.$("THEAD")[0].getElementsByTagName("TR")[0].getElementsByTagName("TH");
for(var i = 0; i < headers.length; i ++){
var h = headers[i];
var d = parseInner(h.innerHTML);
if(d.length < 2)continue;
d = {
label:d[0],
type:d[1],
idx:i
};
d.sort=0;//0 --null/1 --asc/-1 --desc
h.d = d;
h.d.table = table;
h.innerHTML=d.label;
h.οnclick=function(){
if(!this.d)return;
this.d.table.data.sort(this.d.idx);
}
}
for(var i = 0; i < headers.length; i ++){
var h = headers[i];
if(!h.d)continue;
if(h.d.type.charAt(0) == "&"){
var v = parseInt(h.d.type.substring(1)) + thbase;
v = headers[v];
if(v.d){
h.d.as = v;
}else{
h.d = false;
}
}
}
return headers;
}
function getTableRows(table){
table.data.tbody = table.$("TBODY")[0];
var rows = table.data.tbody.getElementsByTagName("TR");
table.data.rows = [];
var headers = table.data.headers;
for(var i = 0; i < rows.length; i ++){
var row = rows[i];
table.data.rows.push(row);
row.cs = row.getElementsByTagName("TD");
for(var j=0; j<row.cs.length; j ++){
var h = headers[j];
if(!h || !h.d || h.d.as)continue;
var c = row.cs[j];
c.v = parseInner(c.innerHTML);
if(c.v.length < 2){
c.v = c.v[0];
}else{
c.v = c.v[1];
}
if(h.d.type == "num"){
try{
c.v = parseInt(c.v);
}catch(e){
c.v = null;
}
if(isNaN(c.v))c.v=null;
}
}
}
}
table.data = {
headers:getTableHeaders(table, thbase?thbase:0)
};
getTableRows(table);
table.data.sorter = function(r1, r2){
var ss = table.data.sorters;
for(var i = 0; i < ss.length; i ++){
var d = ss[i].d;
var v1 = r1.cs[d.idx].v;
var v2 = r2.cs[d.idx].v;
if(v1 == 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 = [];
table.data.rowsort = function(){//[h...]
var hs = table.data.sorters;
for(var i = hs.length - 1; i >= 0; i --){
var h = hs[i];
if(i==0){
h.innerHTML = h.d.label + sortChar(h.d.sort);
}else{
h.innerHTML = h.d.label;
}
}
this.rows.sort(this.sorter);
};
table.data.initSorters = function(opts){
var hs = [].concat(this.sorters);
hs.reverse();
for(var i=opts.length - 1; i >=0; i --){
var opt = opts[i];
if(!opt && opt != 0)continue
if(!opt.idx){
opt={
idx:opt
};
}
if(!opt.sort){
opt.sort="r";
}
var h = this.headers[opt.idx];
if(!h.d)continue;
if(h.d.as)h=h.d.as;
for(var j = 0; j < hs.length; j ++){
if(hs[j] == h)hs[j] = false;
}
switch(opt.sort){
case "a": h.d.sort=1; break;
case "d": h.d.sort=-1; break;
default://r
if(h.d.sort == 0){
h.d.sort=1;
}else {
h.d.sort=0 - h.d.sort;
}
}
hs.push(h);
}
this.sorters = [];
for(var i = hs.length - 1; i >= 0; i --){
var h = hs[i];
if(!h)continue;
this.sorters.push(h);
}
};
table.data.sort = function(){
this.initSorters(arguments);
this.rowsort();
var inputs = table.$("INPUT");
var selected = [];
for(var i = 0; i < inputs.length; i ++){
var ipt = inputs[i];
if(ipt.checked)selected.push(ipt);
}
//rebuild table
for(var i = 0; i < this.rows.length; i ++){
var r = this.rows[i];
this.tbody.removeChild(r);
this.tbody.appendChild(r);
bes.delClass(r, "Row" + (i % 2 - 1));
bes.addClass(r, "Row" + (i % 2));
}
for(var i = 0; i < selected.length; i ++){
selected[i].checked = true;
}
};
return table.data;
},
initSorter:function(ele, thbase, thidx){
var t =bes.table.getParentTable(ele);
bes.table.getSorter(t, thbase);
t.data.sort(thbase + thidx);
},
currow:null,
overRow:function(row){
if(this.currow)this.outRow(this.currow);
this.currow = row;
bes.addClass(row, "CurrentRow");
},
outRow:function(row){
bes.delClass(row, "CurrentRow");
this.currow = null;
}
}
=========================================
/********************************
* remove rows of properties table
*********************************/
bes.removeRow=function(table,name){
try{
for(var i=table.rows.length - 1; i > 0 ; i --){
var row = table.rows[i];
var chx = row.cells[0].childNodes[0];
if(null != chx && chx.checked){
table.deleteRow(i);
}else if(row._selected_){
table.deleteRow(i);
}
}
var status=bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
bes.setRowClass(table);
}
/********************************
* remove all rows of Properties table
*********************************/
bes.removeAllRows=function(table,name){
try{
for(var i=table.rows.length - 1; i > 0 ; i --){
table.deleteRow(i);
}
var status=bes.table.getCheckboxAllSelect(table,name);
bes.table.selectCheckbox(status, false);
}catch(e){}
}
相关文章
- js在指定的table行后添加新行（js实现select数据的填充，添加行，删除行）
- JS动态操作select下拉框
- js table select checkbox 操作
- Selenium4+Python3系列（七） - Iframe、Select控件、交互式弹出框、执行JS、Cookie操作
- Jquery - Select 和 Checkbox 、Textarea的操作
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
- Lua编程示例（一）：select、debug、可变参数、table操作、error
- jquery 操作select,checkbox,radio （整理）
- jQuery 操作input select,checkbox
- JQuery操作select checkbox radio总结