开发总结之Javascript-优快云博客

本文总结了在ASP.NET中使用JavaScript进行TextBox验证、CheckBoxList判断、DropDownList操作、表格行列添加等实用技巧，并解释了setTimeout与setInterval的区别。

本文是我在平时工作中所遇到的javascript方面的一些知识总结，主要针对在asp.net中使用脚本
1.TextBox的验证（这个其实算是正则的内容了）

//去空格

function trim(str)

{

return str.replace(/(^\s*)|(\s*$)/g,"");

}

其中 onbeforepaste属性是防止复制粘贴

//validate email

function IsMail(mail)

{

var patrn = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;

return patrn.test(mail);

}

//validate url

function IsURL(url)

{

var regexp = /^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/;

return regexp.test(url);

}

2. 判断CheckBoxList有没有选择

//id为CheckBoxList控件的ID

//return true 说明没有选择

function checkLocCate(id)

{

var status=true;

var inputs=document.getElementById(id).getElementsByTagName("input");

for(var i=0;i<inputs.length;i++)

{

if(inputs[i].type=="checkbox" && inputs[i].checked==true)

{

status=false;

}

return status;

}

3.为DropDownList添加项

//id为DropDownList控件的ID

function addOptions(id)

{

var ddl=document.getElementById(id);

//将DropDownList的内容清空

ddl.options.length=0;

for(var i=0;i<10;i++)

{

//Options的第一个参数为Text值，第二个参数为Value值

ddl.add(new Option(i,i));

}

4.为table添加行和列
在javascript中添加行和列是通过insertRow和inertCell来实现的，看下面一个例子

<title>AddRow</title>

.BlackBorder{

}{ background-color:#000; font-size:12px;}

.BlackBorder tr{

}{ background-color:#fff;}

</style>

</head>

<body>

<div>

<tr>

<td>

姓名：

年龄：

</td>

</tr>

<tr>

<td>

姓名

</td>

年龄

</td>

<td>

管理

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</form>

function insertRow()

{

var name=document.getElementById("txtName").value;

var age=document.getElementById("txtAge").value;

if(name=="")

{

alert("請填寫姓名");

document.getElementById("txtName").focus();

return false;

}

if(age=="")

{

alert("請填寫年龄");

document.getElementById("txtAge").focus();

return false;

}

var myTable=document.getElementById("tMemInfo");

var objRow = myTable.insertRow(1);

var objCell = objRow.insertCell(0);

objCell.innerHTML= "<input type='text' style='width:100px;' style='display:none'/><span >"+name+"</span>";

var objCell = objRow.insertCell(1);

objCell.innerHTML="<input type='text' style='width:50px;' style='display:none'/><span >"+age+"</span>";

var objCell = objRow.insertCell(2);

objCell.innerHTML=" <input type='button' value='取消' onclick='cancel()' style='display:none'/> "+

" <input type='button' value='儲存' onclick='save()' style='display:none'/>" +

" <input type='button' value='修改' onclick='edit()' />" +

" <input type='button' value='删除' onclick='deleteRow()' />";

document.getElementById("txtName").value="";

document.getElementById("txtAge").value="";

document.getElementById("txtName").focus();

}

//删除行

function deleteRow()

{

var myTable=document.getElementById("tMemInfo");

var trList =myTable.getElementsByTagName("tr");

var row = 0;

for(var i = 0; i < trList.length ; i++)

{

if(event.srcElement.parentNode.parentNode == trList[i])

row = i;

}

myTable.deleteRow(row);

}

function cancel()

{

var e=event.srcElement.parentElement.parentElement;

e.childNodes[0].childNodes[0].style.display="none";

e.childNodes[0].childNodes[1].style.display="";

e.childNodes[1].childNodes[0].style.display="none";

e.childNodes[1].childNodes[1].style.display="";

e.childNodes[2].childNodes[0].style.display="none";

e.childNodes[2].childNodes[2].style.display="none";

e.childNodes[2].childNodes[4].style.display="";

e.childNodes[2].childNodes[6].style.display="";

}

function save()

{

var e=event.srcElement.parentElement.parentElement;

e.childNodes[0].childNodes[0].style.display="none";

e.childNodes[0].childNodes[1].style.display="";

e.childNodes[1].childNodes[0].style.display="none";

e.childNodes[1].childNodes[1].style.display="";

e.childNodes[2].childNodes[0].style.display="none";

e.childNodes[2].childNodes[2].style.display="none";

e.childNodes[2].childNodes[4].style.display="";

e.childNodes[2].childNodes[6].style.display="";

e.childNodes[0].childNodes[1].innerHTML=e.childNodes[0].childNodes[0].value;

e.childNodes[1].childNodes[1].innerHTML=e.childNodes[1].childNodes[0].value;

}

function edit()

{

var e=event.srcElement.parentElement.parentElement;

e.childNodes[0].childNodes[0].style.display="";

e.childNodes[0].childNodes[1].style.display="none";

e.childNodes[1].childNodes[0].style.display="";

e.childNodes[1].childNodes[1].style.display="none";

e.childNodes[2].childNodes[0].style.display="";

e.childNodes[2].childNodes[2].style.display="";

e.childNodes[2].childNodes[4].style.display="none";

e.childNodes[2].childNodes[6].style.display="none";

e.childNodes[0].childNodes[0].value=e.childNodes[0].childNodes[1].innerHTML;

e.childNodes[1].childNodes[0].value=e.childNodes[1].childNodes[1].innerHTML;

}

</script>

</body>

</html>

5 在javascript中setTimeOut和setInterval的區別

//1秒钟执行一次函数1

window.setInterval("函數1",1000);

//延迟1秒钟执行函数2

window.setTiemout("函數2",1000);

转载于:https://www.cnblogs.com/linpengfeixgu/articles/1239728.html