看看这个行么？ 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #keleSelect{ TEXT-DECORATION: none; } body { margin:0; padding:0; } </style> <script type="text/javascript" > var ary = new Array; var tableAlign = "left" // left|right ary.push( { img:"", url:"http://www.kele-cn.cn", title:"回复所有人" }) ; ary.push( { img:"", url:"http://www.kele-cn.cn", title:"转发" }); ary.push( { img:"", url:"http://www.kele-cn.cn", title:"打印" }); ary.push( { img:"", url:"http://www.kele-cn.cn", title:"将 rubyonrails-spinoffs 添加到通讯录" }); ary.push( { img:"", url:"http://www.kele-cn.cn", title:"删除此邮件" }); ary.push( { img:"", url:"http://www.kele-cn.cn", title:"这是网络欺诈" }); ary.push( { img:"", url:"http://www.kele-cn.cn", title:"显示原始邮件" }); ary.push( { img:"", url:"http://www.kele-cn.cn", title:"邮件内容出现乱码?" }); function addOnLoad(newFunction) { var oldFun = window.onload; if(typeof window.onload != "function") { window.onload = newFunction; }else { window.onload = function() { oldFun(); newFunction(); } } } function trOnclick(obj) { var keleKey = document.getElementById("keleKey"); var url = ary[obj.i].url + "?key=" + keleKey.value; location.href = url; } function prepareKeleTable() { var keleTr = document.getElementById("keleTable").getElementsByTagName("tr"); var trCount = keleTr.length for(var i=0;i<trCount;++i) { keleTr.onmouseout = function() {this.style.backgroundColor = "#EEEEEE";}; keleTr.onmouseover = function() {this.style.backgroundColor = "#CCCCCC";}; keleTr.onclick = function(){ trOnclick(this); } } } /** * * @param {Object} table * @info 设置table样式 */ function keleSelectStyle(obj,table) { table.style.border = "#CCCCCC solid 1px"; table.style.backgroundColor = "#EEEEEE"; table.style.color="#496397"; table.style.borderCollapse="collapse"; table.style.fontFamily = "arial,sans-serif"; table.style.fontSize = "14px"; table.style.lineHeight="20px"; table.style.position = "absolute"; table.style.top = obj["offsetHeight"]+ calculateOffsetTop(obj) + "px"; if (tableAlign == "left") { table.style.left = calculateOffsetLeft(obj) + "px"; } else { table.style.right = document.body.offsetWidth - calculateOffsetLeft(obj) -obj.offsetWidth + "px"; } } function keleSelectOnclick(obj){ clearTable(); var table = document.createElement("table"); table.setAttribute("id","keleTable"); keleSelectStyle(obj,table); var tbody = document.createElement("tbody"); for(var i=0;i<ary.length;++i) { var tr = document.createElement("tr"); tr.i = i; var td1 = document.createElement("td"); var td2 = createTd(ary.title); var img = createImg(ary.img); td1.style.padding = "1px"; td1.width = "18px"; td1.appendChild(img); td2.style.padding = "1px"; tr.appendChild(td1); tr.appendChild(td2); tr.style.cursor = "pointer"; tbody.appendChild(tr); } table.appendChild(tbody); document.body.appendChild(table); prepareKeleTable(); /* if(document.getElementById("keleTable")) { alert("yes"); alert(document.getElementById("keleTable").innerHTML); } else { alert("no"); } */ } function prepareKeleSelect() { var keleSelect = document.getElementById("keleSelect"); keleSelect.onblur = function() { setTimeout("clearTable()",100);} keleSelect.onclick = function() { keleSelectOnclick(this); return false;}; } function calculateOffsetLeft(field) { return calculateOffset(field,"offsetLeft"); } function calculateOffsetTop(field) { return calculateOffset(field,"offsetTop"); } function calculateOffset(field,attr) { if(field) { return field[attr] + calculateOffset(field.offsetParent, attr); } else { return 0; } } function clearTable() { if(!document.getElementById("keleTable")) return false; var keleTable = document.getElementById("keleTable"); document.body.removeChild(keleTable); } function createTd(text){ var td = document.createElement("td"); var textNode = document.createTextNode(text); td.appendChild(textNode); return td; } function createImg(url) { if (url != "") { var img = document.createElement("img"); img.setAttribute("src", url); return img; } else { var text = document.createTextNode(" "); return text; } } addOnLoad(prepareKeleSelect); </script> </head> <body> <div style="margin:0 auto;text-align:center;"> <h1><a id="keleSelect" href="#"></>OnClick</a></h1> <input type="hidden" id="keleKey" name="keleKey" value="KeleKeyyyyyyyy"> </div> </body> </html>