|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
 [急]這種形式的表格怎麼做最方便？
[img]http://tinypic.com/x845x[/img]
如圖，需要點上面的標題，裡面的內容跟著變動（內容是動態的，有長有短），而且上面的顏色也相應改變。怎麼做比較好，用iframe行嗎？ |
一次性讀取數據庫（將數據都列出），設置<table id="tb1"....style="display:none">
那個想顯示就<table id="td2" .... style="display:block"> |
我找到以前一個朋友寫的：
[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表單頁標籤式詳細信息顯示效果</title>
<style type="text/css">
<!--
.tablestyle1 {
font: normal 12px "細明體", Arial;
color: #777777;
text-decoration: none;
text-align: center;
vertical-align: middle;
border:1px solid #ff0000;
background: #FDFDFD;
padding:2px;
}
.Tdstyle1 {
background: #FDFDFD;
border-top: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
cursor: hand;
text-decoration: none;
}
.Titledivstyle {
text-align: justify;
text-justify:Distribute-all-lines;
}
.inf1 {
color: #EDB905;
}
.inf2 {
color: #107460;
}
body {
margin-left: 0px;
margin-top: 0px;
}
.Titledivstyle1 { text-align: justify;
text-justify:Distribute-all-lines;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function iniINF(Init)//在網頁初始化時，將各項詳細信息隱藏的過程。
{
if(Init)
{
inf1.style.display='none';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
}
}
function showinf(theObj)//查找並顯示對應詳細信息的過程。
{
switch(theObj)
{
case 'inf1'://當鼠標點擊目標為「銀行匯款」時的處理過程。
with(findObj(theObj))
if(style.display=='none')//檢查當前鼠標點擊的選項的詳細信息是否已處於顯示狀態。若已顯示，則關閉；若未顯示，則彈出。
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu1.style.color='#FF0000';
Menu1.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu1.style.color='';
Menu1.style.background='';
}
break;
case 'inf2'://當鼠標點擊目標為「郵局匯款」時的處理過程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf1.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu2.style.color='#FF0000';
Menu2.style.background='#E1F8C2';
Menu1.style.color='';
Menu1.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu2.style.color='';
Menu2.style.background='';
}
break;
case 'inf3'://當鼠標點擊目標為「網上支付」時的處理過程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf1.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu3.style.color='#FF0000';
Menu3.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu1.style.color='';
Menu1.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu3.style.color='';
Menu3.style.background='';
}
break;
case 'inf4'://當鼠標點擊目標為「電話充值」時的處理過程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf1.style.display="none";
inf5.style.display="none";
inf6.style.display="none";
Menu4.style.color='#FF0000';
Menu4.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu1.style.color='';
Menu1.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu4.style.color='';
Menu4.style.background='';
}
break;
case 'inf5'://當鼠標點擊目標為「手機充值」時的處理過程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf1.style.display="none";
inf6.style.display="none";
Menu5.style.color='#FF0000';
Menu5.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu1.style.color='';
Menu1.style.background='';
Menu6.style.color='';
Menu6.style.background='';
}
else
{
style.display='none';
Menu5.style.color='';
Menu5.style.background='';
}
break;
case 'inf6'://當鼠標點擊目標為「U幣卡充值」時的處理過程。
with(findObj(theObj))
if(style.display=='none')
{
style.display='';
inf2.style.display="none";
inf3.style.display="none";
inf4.style.display="none";
inf5.style.display="none";
inf1.style.display="none";
Menu6.style.color='#FF0000';
Menu6.style.background='#E1F8C2';
Menu2.style.color='';
Menu2.style.background='';
Menu3.style.color='';
Menu3.style.background='';
Menu4.style.color='';
Menu4.style.background='';
Menu5.style.color='';
Menu5.style.background='';
Menu1.style.color='';
Menu1.style.background='';
}
else
{
style.display='none';
Menu6.style.color='';
Menu6.style.background='';
}
break;
}
}
// Example: obj = findObj("image1");
function findObj(theObj, theDoc)//查找對象函數。
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
</head>
<body onLoad="iniINF(true);">
<center><div align="center" style="padding:2px">
<table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1">
<tr>
<td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">銀行匯款</td>
<td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">郵局匯款</td>
<td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">網上支付</td>
<td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">電話充值</td>
<td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手機充值</td>
<td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U幣卡充值</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf1"><table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><p>0</p>
</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf3"><table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">2</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">3</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="27" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">5</td>
</tr>
</table></td>
</tr>
</table>
</div>
</center>
</body>
</html>
[/html]
比較好用，但是有點小問題，就是同一個標籤，在點第二次的時候，裡面的內容就隱藏了。而我需要的是，如果重複點當前的標籤，數據內容不變化，該怎麼改呢？ |
| 好了。建議收藏此貼。 |
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表單頁標籤式詳細信息顯示效果</title>
<style type="text/css">
<!--
.tablestyle1 {
font: normal 12px "細明體", Arial;
color: #777777;
text-decoration: none;
text-align: center;
vertical-align: middle;
border:1px solid #ff0000;
background: #FDFDFD;
padding:2px;
}
.Tdstyle1 {
background: #FDFDFD;
border-top: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
cursor: hand;
text-decoration: none;
}
.Titledivstyle {
text-align: justify;
text-justify:Distribute-all-lines;
}
.inf1 {
color: #EDB905;
}
.inf2 {
color: #107460;
}
#inf2,#inf3,#inf4,#inf5,#inf6{
display:none;
}
body {
margin-left: 0px;
margin-top: 0px;
}
.Titledivstyle1 { text-align: justify;
text-justify:Distribute-all-lines;
}
-->
</style>
</HEAD>
<body>
<center><div align="center" style="padding:2px">
<table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1">
<tr>
<td id=Menu1 width="80" height="20" align="center" onMouseUp="showinf('inf1')">銀行匯款</td>
<td id=Menu2 width="80" align="center" onMouseUp="showinf('inf2')">郵局匯款</td>
<td id=Menu3 width="80" align="center" onMouseUp="showinf('inf3')">網上支付</td>
<td id=Menu4 width="80" align="center" onMouseUp="showinf('inf4')">電話充值</td>
<td id=Menu5 width="80" align="center" onMouseUp="showinf('inf5')">手機充值</td>
<td id=Menu6 width="80" align="center" onMouseUp="showinf('inf6')">U幣卡充值</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf1"><table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><p>0</p>
</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf3"><table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">2</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">3</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="27" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">5</td>
</tr>
</table></td>
</tr>
</table>
</div>
</center>
<SCRIPT LANGUAGE="JavaScript">
<!--
var lastObj = inf1;
function showinf(Obj){
var Obj = eval(Obj);
if (lastObj == Obj) {return;}
lastObj.style.display="none";
Obj.style.display="block";
lastObj = Obj;
}
//-->
</SCRIPT>
</body>
</html>
[/html] |
謝謝樓上。能幫我看看這個麼？
http://www.jnyo.com/other/bq.txt |
| 好東東，收藏收藏 |
| 謝了！~~~~~~~~~~~~ |
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表單頁標籤式詳細信息顯示效果</title>
<style type="text/css">
<!--
.tablestyle1 {
font: normal 12px "細明體", Arial;
text-decoration: none;
text-align: center;
vertical-align: middle;
border:1px solid #ff0000;
background: #FDFDFD;
padding:2px;
}
.Tdstyle1 {
background: #FDFDFD;
border-top: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
border-bottom: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
cursor: hand;
text-decoration: none;
}
.Titledivstyle {
text-align: justify;
text-justify:Distribute-all-lines;
}
#inf2,#inf3,#inf4,#inf5,#inf6{
color:black;
display:none;
}
.MenuOne{
color:white;
background-color:#F9A781;}
.MenuTwo{
color:Black;
background-color:white;}
body {
margin-left: 0px;
margin-top: 0px;
}
.Titledivstyle1 { text-align: justify;
text-justify:Distribute-all-lines;
}
-->
</style>
</HEAD>
<body>
<center><div align="center" style="padding:2px">
<table width="480" border="0" cellpadding="0" cellspacing="0" class="tablestyle1">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="Tdstyle1">
<tr>
<td id=Menu1 width="80" height="20" align="center" onselectstart ="return false" onselect="selection.empty()" ondragstart="return false" onMouseUp="showinf('inf1')">銀行匯款</td>
<td id=Menu2 width="80" align="center" onselectstart ="return false" onselect="selection.empty()" ondragstart="return false" onMouseUp="showinf('inf2')">郵局匯款</td>
<td id=Menu3 width="80" align="center" onselectstart ="return false" onselect="selection.empty()" ondragstart="return false" onMouseUp="showinf('inf3')">網上支付</td>
<td id=Menu4 width="80" align="center" onselectstart ="return false" onselect="selection.empty()" ondragstart="return false" onMouseUp="showinf('inf4')">電話充值</td>
<td id=Menu5 width="80" align="center" onselectstart ="return false" onselect="selection.empty()" ondragstart="return false" onMouseUp="showinf('inf5')">手機充值</td>
<td id=Menu6 width="80" align="center" onselectstart ="return false" onselect="selection.empty()" ondragstart="return false" onMouseUp="showinf('inf6')">U幣卡充值</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf1"><table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><p>0</p>
</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf2"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf3"><table width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">2</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf4"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">3</td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top" id="inf5"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="27" valign="top" id="inf6"><table width="90%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">5</td>
</tr>
</table></td>
</tr>
</table>
</div>
</center>
<SCRIPT LANGUAGE="JavaScript">
<!--
var lastMenu = Menu1;
lastMenu.className="MenuOne";
var lastObj = inf1;
function showinf(Obj){
var Obj = eval(Obj);
if (lastObj == Obj) {return;}
lastMenu.className="MenuTwo";
lastObj.style.display="none";
lastMenu = event.srcElement;
lastMenu.className="MenuOne";
Obj.style.display="block";
lastObj = Obj;
}
//-->
</SCRIPT>
</body>
</html>
[/html] |
拖動什麼問題？
你想禁止選中文本？ |
| 已改過了，禁止了選中 |
|
