当前页面: 开发资料首页 → Javascript 专题 → 可输入的select改进版本,同一页面可有多个list,调用接口简化

可输入的select改进版本,同一页面可有多个list,调用接口简化

摘要: 可输入的select改进版本,同一页面可有多个list,调用接口简化

<head>
Untitled Document

<script language="JavaScript">
document.onclick=hiddenDiv;
function getDivCount() {
var arr=document.all;
re=0;
for (i=0;i str=arr[i].id;
if (str.indexOf("ZfDiv_")==0) {
re++;
}
}
return re;
}

function getI(ObjId) {//取得objId的最后一位数字
for (i=0;i if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1);
}
return 0;
}

function select_edit(TextObj){//鼠标经过高亮度
TextObj.focus();TextObj.select();
}

function checkValue(ID){
var sl=document.all["ZfText_"+ID];
var sv=document.all["ZfDiv_"+ID];
var da=document.all["ZfData_"+ID];
sv.style.display=''

for(i=0;i
for(i=0;i if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none';
getPosition(ID);
}
}

function getL(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l
}
function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t
}

function hiddenDiv(){
var o=window.event.srcElement.id;
var tb
var sv
if(o=="") {
for (j=0;j tb=document.getElementById('ZfData_'+j);
sv=document.getElementById('ZfDiv_'+j);
for(i=0;i sv.style.display='none';
}

}

}//隐藏模拟层

function setValue(obj){
var i=getI(obj.parentElement.parentElement.parentElement.id);
//alert(obj.parentElement.parentElement.parentElement.id);

var sl=document.all["ZfText_"+i];
var sv=document.all['ZfDiv_'+i];
sl.value=obj.innerText;
sv.style.display='none';
//sldIndex=obj.parentElement.rowIndex;
}//给文本框赋值

function over(obj){
obj.className="td_over"
obj.title=obj.innerText
obj.focus();
}//鼠标经过变色

function out(obj){
obj.className="td_out"
}//鼠标离开还原

function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()

//增加list的接口,ID表示该组控件是页面中的第几个
function add(v,ID){
var sv=document.all['ZfDiv_'+ID];
if(!v.Trim()){return;}
var tb=document.all['ZfData_'+ID];
var c=tb.insertRow(tb.rows.length).insertCell();
c.innerHTML=''+v.Trim()+'';
c.onmouseover=new Function("over(this)");
c.onmouseout=new Function("out(this)");
c.onclick=new Function("setValue(this)");
c.className="td_out";
v='';
}
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addText(name,DefValue) {
var i=getDivCount();
document.write('');
document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" class="slv" onmouseover="select_edit(this)" onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\'\'" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\'\'">');
document.write('

');
}

</script>
</head>
<body>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 我也写了个日历控件
后一篇: 擦除式图片轮番显示效果