前些天在做项目的过程中遇到一个问题,外网申报的时候,鼠标经过审批事项的时候,要列出含有大类属性的听事项,为了省去写Document.get××××()方法,我就使用了AJAX的prototype框架,结果大类属性的事项是列出来了,但是位置不对,没有达到我想要的效果。故采用最原始的写法。
代码如下:
//显示大类属性 add by huangshuidan@gmail.com 2009-12-15
function show(obj,itemcode,serviceunid,servicename,deptunid){
//alert("itemcode:"+itemcode);
//ajax最原始的写法
var url1="selectSort.jsp?itemcode="+itemcode;
var xmlhttp1=new ActiveXObject("Msxml2.XMLHTTP.4.0");
xmlhttp1.Open("POST", url1, false);
xmlhttp1.Send("");
var xmlobj = xmlhttp1.responseXML;
//alert("xmlobj:"+xmlobj);
//var myoid = xmlobj.documentElement.text;
var resp=xmlobj.getElementsByTagName("resp");
//alert("myoid:"+myoid);
//alert("resp:"+resp.length);
//获得div的引用
var mydiv=document.getElementById("sortdiv");
var child=mydiv.getElementsByTagName("TABLE");
for(i=0;i<child.length;i++){
mydiv.removeChild(child[i]);//删除前一次创建的table
}
//获得sortdiv的引用
var mybody=document.getElementById("sortdiv");
//创建一个<table></table>元素
var mytable = document.createElement("TABLE");
//创建一个<TBODY></TBODY>元素
mytablebody = document.createElement("TBODY");
// 创建行列
//for(j=0;j<3;j++) {
for(var j=0;j<resp.length;j++){
var re=resp[j];
var unid=re.getElementsByTagName("res")[0].firstChild.data;
var name=re.getElementsByTagName("res")[1].firstChild.data;
//创建一个<TR></TR>元素
mycurrent_row=document.createElement("TR");
for(i=0;i<1;i++) {
//创建一个<TD></TD>元素<tr align="center" bgcolor="#DFF8FF">
mycurrent_cell=document.createElement("TD");
//创建一个文本元素
currenttext=document.createTextNode(name);
//创建一个<A></A>元素
current_a=document.createElement("A");
//把文本元素增加到<A></A>元素上
current_a.appendChild(currenttext);
current_a.setAttribute("href","handleServiceSort.jsp?serviceunid="+serviceunid+"&servicename="+servicename+"&deptunid="+deptunid+"&getchild="+unid);
current_a.setAttribute("target","_blank");
//设置样式 add by huangshuidan@gmail.com 2009-12-17
//current_a.setAttribute("style","text-decoration:none");
current_a.style.cssText="text-decoration:none;font-size: 13px;color:#000;margin:0 auto;";
//把<A></A>元素添加到单元TD上
mycurrent_cell.appendChild(current_a);
//设置td属性
if(j%2==1){
mycurrent_cell.setAttribute("bgColor","#FBFEFF");
}else{
mycurrent_cell.setAttribute("bgColor","#DFF8FF");
}
mycurrent_cell.setAttribute("align","center");
// appends the cell TD into the row TR
//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
//创建一个<TR></TR>元素
mycurrent_row=document.createElement("TR");
//创建一个<TD></TD>元素
mycurrent_cell=document.createElement("TD");
//创建一个文本元素
currenttext=document.createTextNode("关闭");
//创建一个<A></A>元素
current_a=document.createElement("A");
current_a.appendChild(currenttext);
current_a.setAttribute("href","javascript:hiddenDiv();");
//设置样式 add by huangshuidan@gmail.com 2009-12-17
current_a.style.cssText="text-decoration:none;font-size: 13px;color:#000;margin:0 auto;";
mycurrent_cell.appendChild(current_a);
//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
mybody.appendChild(mytable);
// 把mytable的border 属性设置为2
mytable.setAttribute("border","0");
mytable.setAttribute("bgColor","#C1F0FF");
mytable.setAttribute("width","194");
mytable.setAttribute("height","101");
mytable.setAttribute("cellPadding","0");
mytable.setAttribute("cellSpacing","1");
document.all.sortdiv.style.display="block";
obj.style.background="#FF9933";
document.all.sortdiv.style.left=event.x-210;
document.all.sortdiv.style.top=event.y+5;
}
<div id="sortdiv" style="position:absolute;display:none;">
<table width="194" height="101" border="0" cellpadding="0" cellspacing="1" bgcolor="#C1F0FF">
<tr align="center" bgcolor="#DFF8FF">
<td><input type="button" name="clobtn" value="关闭"> </td>
</tr>
</table>
</div>
注意的几点:
1.通过Document来设置<td>的背景色时"bgColor"如果写成"bgcolor"就没有起作用了。(本人当时就犯了这种弱智的错误)
2.通过Document来设置按钮的事件,点击是没有反应的,所有这里我改成用<a href的点击事件。
3.设置<a href的样式必须用obj.style.cssText="要设置的样式";如:current_a.style.cssText="text-decoration:none;font-size: 13px;color:#000;margin:0 auto;";