求代码:如何实现这样的功能:点击一个字符串,在下方显示出表格及表格的内容(表格的右上角打开时加上一个关闭钮),点击关闭就只剩下字符串了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<br><br><br><br>
sdfsadfasdfasdfasdfasdfasdfas<a href="#" onclick="document.all.table1.style.display=''">显示</a>
<table border=1 id="table1" style="display:none">
<tr><td><a href="#" onclick="table1.style.display='none'">¹Ø±Õ</a></td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
</table>
不能显示在字的下方.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ÎÞ±êÌâÎÄµµ</title>
</head><body><span onclick='show_div.style.display="";show_div.style.top=this.offsetTop + this.offsetHeight ;show_div.style.left = this.offsetLeft'>ÏÔÊ¾</span>
<script>
document.write("<div style='position:absolute;background-color:#A0BF91;width:300px;height:150px;display:none;' id=show_div>");
document.write("<table border=1 cellspacing=1 cellpadding=1 width=100% id=dy_table >");
document.write("<tr><td colspan=6 onclick='document.all.show_div.style.display=\"none\";' align=right >*</td></tr>");
document.write("<tr><td>d</td><td>0</td><td>0</td><td>0</td><td onclick='addrow();'>add</td><td onclick='delrow(this);'>del</td></tr>");
document.write("</table>");
document.write("</div>");
function addrow(){
var oTr = dy_table.insertRow();
for(i=0 ;i<6 ; i++){
if(i < 4 ){
eval("oTd" + i + " = oTr.insertCell()");
eval("oTd" + i + ".innerHTML = 'i love you' " );
}else{
switch (i){
  case 4:
eval("oTd" + i + " = oTr.insertCell()");
eval("oTd" + i + ".innerHTML = 'add' " );
eval("oTd" + i + ".onclick = addrow; " );
case 5:
  eval("oTd" + i + " = oTr.insertCell()");
  eval("oTd" + i + ".innerHTML = 'del' " );  //Õâ¾ä»°Ò²ÓÐÎÊÌâ£¬²»ÖªµÀÎªÊ²Ã´»á³öÏÖÁ½¸ödel
//eval("oTd" + i + ".onclick = delrow(this); " );  //Õâ¾ä»°ÓÐµãÎÊÌâ¡£²»ÖªµÀÈçºÎ¶¯Ì¬Ìí¼Ó´øÓÐ²ÎÊýµÄ·½·¨£¿
default:
}
}
}
}
function delrow(ti){
var RI = ti.parentNode.parentNode;
RI.deleteRow(ti.parentNode.rowIndex);
}
</script></body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head><body><span onclick='show_div.style.display="";show_div.style.top=this.offsetTop + this.offsetHeight ;show_div.style.left = this.offsetLeft'>显示</span>
<script>
document.write("<div style='position:absolute;background-color:#A0BF91;width:300px;height:150px;display:none;' id=show_div>");
document.write("<table border=1 cellspacing=1 cellpadding=1 width=100% id=dy_table >");
document.write("<tr><td colspan=6 onclick='document.all.show_div.style.display=\"none\";' align=right >*</td></tr>");
document.write("<tr><td>d</td><td>0</td><td>0</td><td>0</td><td onclick='addrow();'>add</td><td onclick='delrow(this);'>del</td></tr>");
document.write("</table>");
document.write("</div>");
function addrow(){
var oTr = dy_table.insertRow();
for(i=0 ;i<6 ; i++){
eval("oTd" + i + " = oTr.insertCell()");
if(i < 4 ){
eval("oTd" + i + ".innerHTML = 'i love you' " );
}else{
switch (i){
  case 4:
eval("oTd" + i + ".innerHTML = 'add' " );
eval("oTd" + i + ".onclick = addrow; " );
case 5:
  eval("oTd" + i + ".innerHTML = 'del' " );
//eval("oTd" + i + ".onclick = delrow(this); " );  //这句话有点问题。不知道如何动态添加带有参数的方法？
default:
}
}
}
}
function delrow(ti){
var RI = ti.parentNode.parentNode;
RI.deleteRow(ti.parentNode.rowIndex);
}
</script></body>
</html>
<span onclick="show(this,'table1')">测试</span>
<table border=1 id="table1" style="position:absolute;visibility:hidden">
<tr><td><a href="#" onclick="table1.style.visibility='hidden'">关闭</a></td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
<tr><td>test</td><td>test</td></tr>
</table>
<script>
function show(o,t){
var e=o;
var tt=document.getElementById(t)
var l=o.offsetLeft;
var t=o.offsetTop;
while(e=e.offsetParent){//定位
l+=e.offsetLeft;
t+=e.offsetTop;
}
with(tt.style){
left=l
top=t+o.offsetHeight;
visibility='visible';//显示
}
}
</script>