只能輸入數字正則 <input onKeyUp="value=value.replace(//D+/g,'')"> 只能輸入中文正則 <input onKeyUp="value=value.replace(/[ -}]/g,'')"> 讓英文字串超出表格寬度自動換行 word-wrap: break-word; word-break: break-all; 用斷行符號提交表單 <body onLoad="form.txt.focus()"> <form name="form"> <input name="txt" size="100" value="Mouse點我提交,按Enter也提交" onClick="form.submit()" onKeyDown="if (event.keyCode==13)form.submit()"> </form> 刪除時確認 <a href='javascript:if(confirm("確實要刪除嗎?"))location="boos.asp?&areyou=刪除&page=1"'>刪除</a> 怎樣讓表單沒有凹凸感 <input type=text style="border:1 solid #000000"> 或 <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea> 怎樣去掉圖片連結點擊後,圖片周圍的虛線 <a href="#" onFocus="this.blur()"><img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200604/20060418120354533.gif" border=0></a> 子視窗重新整理父視窗 window.opener.location.reload() 開啟一個新的視窗,而視窗的寬度和高度則是這個圖片的實際的高和寬 <img src="http://webdesign.chinaitlab.com/UploadFiles_8014/200604/20060418120354533.gif" onClick="window.open('','','width='+this.width+',height='+this.height)"> 彈出的視窗置中 <script> myWin=window.open("about:blank","","width=200,height=160"); myWin.moveTo(screen.width/2-100,screen.height/2-80); </script> 單擊表格中某個儲存格則這個儲存格變顏色 <script language="JavaScript"> function test(t) { for (var i=0; i<t.rows.length; i++) for (var j=0; j<t.rows[i].cells.length; j++) t.rows[i].cells[j].bgColor = t.rows[i].cells[j] == event.srcElement ? 'red' : ''; } </script> <table width="300" cellspacing="1" bgcolor="black" onClick="test(this)"> <tr bgcolor="white" height="20"><td> </td><td> </td><td> </td></tr> <tr bgcolor="white" height="20"><td> </td><td> </td><td> </td></tr> <tr bgcolor="white" height="20"><td> </td><td> </td><td> </td></tr> </table> 單選框問題 有三個單選框, <input type=radio name=1>222 <input type=radio name=2>222 <input type=radio name=3>222 怎麼樣使選中第一個後才能選擇下面兩個中的一個。 <script> function change(radobj){ var obj = document.getElementsByName("radio2"); for(i=0;i<obj.length;i++){ obj[i].disabled = !radobj.checked; } } </script> <input type=radio name="radio1" onclick=change(this)>222 <input type=radio name="radio2" disabled>222 <input type=radio name="radio2" disabled>222 tbody地區捲軸 <HTML><HEAD><TITLE>鎖定表格欄位範例網頁</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <STYLE type=text/css>BODY { FONT: 12px 細明體; CURSOR: default } TD { FONT: 12px 細明體; CURSOR: default } .title { BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ccc; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap } .cdata { BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap } </STYLE> <SCRIPT language=JavaScript > // 欄位標題 ( 欄位名稱 # 欄位寬度 # 資料對齊 ) var DataTitles=new Array( "歌手 / 團體#90 #left" , "專輯名稱 #130#left" , "發行公司 #110#left" , "本周排名 #58 #center", "排名狀況 #58 #center", "上周排名 #58 #center", "上榜周數 #58 #center", "最高名次 #58 #center", "銷售百分比 #70 #center") // 欄位資料 ( 二維陣列 ) var DataFields=new Array() DataFields[0] =new Array("蕭亞軒" ,"愛的主打歌-吻" ,"維京 Virgin" ,"1" ,"持平" ,"1" ,"2","1" ,"2.9 %") DataFields[1] =new Array("張惠妹" ,"發燒" ,"華納 Warner" ,"2" ,"持平" ,"2" ,"2","2" ,"2.1 %") DataFields[2] =new Array("陶吉吉" ,"黑色柳丁" ,"全員集合 Shock" ,"3" ,"持平" ,"3" ,"5","1" ,"1.8 %") DataFields[3] =new Array("S.H.E" ,"美麗新世界" ,"華研 HIM" ,"4" ,"持平" ,"4" ,"6","1" ,"1.2 %") DataFields[4] =new Array("艾薇兒" ,"展翅高飛" ,"博德曼 BMG" ,"5" ,"新進榜","-" ,"1","5" ,"1.1 %") DataFields[5] =new Array("任賢齊" ,"一個任賢齊" ,"滾石 Rock" ,"6" ,"新進榜","-" ,"1","6" ,"1.0 %") DataFields[6] =new Array("範逸臣" ,"範逸臣第一張專輯","豐華 Forward" ,"7" ,"持平" ,"7" ,"2","7" ,"0.9 %") DataFields[7] =new Array("謝霆鋒" ,"無形的他全精選" ,"新力 Sony" ,"8" ,"下跌" ,"6" ,"4","4" ,"0.9 %") DataFields[8] =new Array("周蕙" ,"寂寞城市" ,"福茂 Decca" ,"9" ,"下跌" ,"5" ,"3","5" ,"0.8 %") DataFields[9] =new Array("周杰倫" ,"八度空間" ,"博德曼 BMG" ,"10","下跌" ,"8" ,"8","1" ,"0.8 %") DataFields[10]=new Array("酷玩樂團","玩過頭" ,"科藝百代 EMI" ,"11","上升" ,"16","2","11","0.7 %") DataFields[11]=new Array("張震嶽" ,"等我有一天" ,"魔岩 Magicstone","12","新進榜","-" ,"1","12","0.6 %") DataFields[12]=new Array("堂本剛" ,"紅與藍" ,"艾回 Avex" ,"13","新進榜","-" ,"1","13","0.6 %") DataFields[13]=new Array("ENERGY" ,"COME ON" ,"環球 Universal" ,"14","下跌" ,"10","9","5" ,"0.6 %") DataFields[14]=new Array("陳冠希" ,"TRANSITION" ,"艾回 Avex" ,"15","下跌" ,"9" ,"3","5" ,"0.4 %") DataFields[15]=new Array("合輯" ,"MTV 嘻哈大師" ,"環球 Universal" ,"16","下跌" ,"12","3","12","0.4 %") </SCRIPT> <SCRIPT language=JavaScript> var BoxWidth = 480 // 資料表顯示寬度 ( 不含捲軸 ) var ShowLine = 10 // 資料表顯示列數 var RsHeight = 21 // 資料列高度 var LockCols = 1 // 要鎖定的欄位元 ( 由左至右 ) function WriteTable(){ // 寫入表格 var iBoxWidth=BoxWidth var NewHTML="<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/"><tr>/ <td><div style=/"width:100%;overflow-x:scroll/">/ <table border=/"0/" cellpadding=/"0/" cellspacing=/"0/"><tr>" for(i=0;i<DataTitles.length;i++){ if(i<LockCols){ var cTitle=DataTitles[i].split("#") iBoxWidth-=cTitle[1] var DynTip=((i+1)==LockCols)?"解除鎖定":"鎖定此欄位" NewHTML+="<td><div class=/"title/" style=/"width:"+cTitle[1]+"px;height:"+RsHeight+"px/" title=/""+DynTip+"/" onclick=/"ResetTable("+i+")/">"+cTitle[0]+"</div></td>" } } NewHTML+="</tr>/ <tr><td colspan=/""+LockCols+"/">/ <div id=/"DataFrame1/" style=/"position:relative;width:100%;overflow:hidden/">/ <div id=/"DataGroup1/" style=/"position:relative/"></div></div>/ </td></tr></table></div></td>/ <td valign=/"top/"><div style=/"width:"+iBoxWidth+"px;overflow-x:scroll/">/ <table border=/"0/" cellpadding=/"0/" cellspacing=/"0/"><tr>" for(i=0;i<DataTitles.length;i++){ if(i>=LockCols){ var cTitle=DataTitles[i].split("#") NewHTML+="<td><div class=/"title/" style=/"width:"+cTitle[1]+"px;height:"+RsHeight+"px/" title=/"鎖定此欄位/" onclick=/"ResetTable("+i+")/">"+cTitle[0]+"</div></td>" } } NewHTML+="</tr>/ <tr><td colspan=/""+(DataTitles.length-LockCols)+"/">/ <div id=/"DataFrame2/" style=/"position:relative;width:100%;overflow:hidden/">/ <div id=/"DataGroup2/" style=/"position:relative/"></div>/ </div></td></tr></table>/ </div></td><td valign=/"top/">/ <div id=/"DataFrame3/" style=/"position:relative;background:#000;overflow-y:scroll/" onscroll=/"SYNC_Roll()/">/ <div id=/"DataGroup3/" style=/"position:relative;width:1px;visibility:hidden/"></div>/ </div></td></tr></table>" DataTable.innerHTML=NewHTML ApplyData() } function ApplyData(){ // 寫入資料 var NewHTML="<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">" for(i=0;i<DataFields.length;i++){ NewHTML+="<tr>" for(j=0;j<DataTitles.length;j++){ if(j<LockCols){ var cTitle=DataTitles[j].split("#") NewHTML+="<td><div class=/"cdata/" style=/"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"/">"+DataFields[i][j]+"</div></td>" } } NewHTML+="</tr>" } NewHTML+="</table>" DataGroup1.innerHTML=NewHTML var NewHTML="<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">" for(i=0;i<DataFields.length;i++){ NewHTML+="<tr>" for(j=0;j<DataTitles.length;j++){ if(j>=LockCols){ var cTitle=DataTitles[j].split("#") NewHTML+="<td><div class=/"cdata/" style=/"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"/">"+DataFields[i][j]+"</div></td>" } } NewHTML+="</tr>" } NewHTML+="</table>" DataGroup2.innerHTML=NewHTML DataFrame1.style.pixelHeight=RsHeight*ShowLine DataFrame2.style.pixelHeight=RsHeight*ShowLine DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1) } function ResetTable(n){ var iBoxWidth=0 for(i=0;i<DataTitles.length;i++){ if(i<(n+1)){ var cTitle=DataTitles[i].split("#") iBoxWidth+=parseInt(cTitle[1]) } } if(iBoxWidth>BoxWidth){ var Sure=confirm("/n鎖定欄位的寬度大於資料表顯示的寬 /n/n度,這可能會造成版面顯示不正常。/n/n/n您確定要繼續嗎?") }else{ Sure=true } if(Sure){ LockCols=(LockCols==n+1)?0:n+1 WriteTable() } } function SYNC_Roll(){ DataGroup1.style.posTop=-DataFrame3.scrollTop DataGroup2.style.posTop=-DataFrame3.scrollTop } window.onload=WriteTable </SCRIPT> <META content="MSHTML 6.00.2800.1170" name=GENERATOR></HEAD> <BODY> <CENTER> <H4>鎖定表格欄位範例網頁</H4><!--// 資料表 ( 開始 ) //--> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar"> <DIV id=DataTable></DIV></TD></TR></TBODY></TABLE><!--// 資料表 ( 結束 ) //--> <P>點取欄位標題可重新設定或解除目前的鎖定狀態</P></CENTER></BODY></HTML> |