站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题网页中一些常见的问题与解决代码

网页中一些常见的问题与解决代码

摘要: 网页中一些常见的问题与解决代码
<tr> <td>

只能输入数字正则
<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>

删除时确认

删除

怎样让表单没有凹凸感
<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>

怎样去掉图片链接点击后,图片周围的虚线

http://www.webjx.com/images/logoo.gif" border=0>

子窗口刷新父窗口

window.opener.location.reload()

打开一个新的窗口,而窗口的宽度和高度则是这个图片的实际的高和宽

http://www.webjx.com/images/logoo.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 for (var j=0; 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[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区域滚动条

<head>锁定表格栏位范例网页

<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>

\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i=0;i if(i var cTitle=DataTitles[i].split("#")
iBoxWidth-=cTitle[1]
var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"
NewHTML+="<td>
"+cTitle[0]+"
</td>"
}
}
NewHTML+="</tr>\
<tr><td colspan=\""+LockCols+"\">\
\
\
</td></tr></table>
</td>\
<td valign=\"top\">
\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i=0;i if(i>=LockCols){
var cTitle=DataTitles[i].split("#")
NewHTML+="<td>
"+cTitle[0]+"
</td>"
}
}
NewHTML+="</tr>\
<tr><td colspan=\""+(DataTitles.length-LockCols)+"\">\
\
\
</td></tr></table>\
</td><td valign=\"top\">\
\
\
</td></tr></table>"
DataTable.innerHTML=NewHTML
ApplyData()
}

function ApplyData(){ // 写入资料
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i NewHTML+="<tr>"
for(j=0;j if(j var cTitle=DataTitles[j].split("#")
NewHTML+="<td>

"+DataFields[i][j]+"
</td>"
}
}
NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup1.innerHTML=NewHTML


var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i NewHTML+="<tr>"
for(j=0;j if(j>=LockCols){
var cTitle=DataTitles[j].split("#")
NewHTML+="<td>

"+DataFields[i][j]+"
</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 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>

</head>
<body>


锁定表格栏位范例网页

</tr> </table>
↑返回目录
前一篇: 页面内的超级酷浮动窗口
后一篇: 表格中两行的颜色交替显示