開発まとめ---Javascript編
14504 ワード
本論文は私が普段仕事で出会ったjavascriptに関する知識のまとめであり、主にasp.netで脚本を使うことについてである.
1.TextBoxの検証(これは正則の内容です)
2.Check BoxListが選択されているかどうかを判断する.
javascriptに行と列を追加することはinsertRowとinertCellによって実現されます.次の例を見てください.
1.TextBoxの検証(これは正則の内容です)
<!-- -->
<input type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" />
<!-- -->
<input type="text" onkeyup="value=value.replace([^\d]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
<!-- -->
<input type="text" onkeyup="value=value.replace([\W]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
<!--��C� � c-->
<input type="text" ID="Text1" onkeyup="value=value.replace(/[^\d|^\.]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d|^\.]/g,''))">
上のコードの中でonbeforepaste属性はコピー貼り付け防止です.2.Check BoxListが選択されているかどうかを判断する.
//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.テーブルに行と列を追加するjavascriptに行と列を追加することはinsertRowとinertCellによって実現されます.次の例を見てください.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AddRow</title>
<style type="text/css">
.BlackBorder
{
background-color: #000;
font-size: 12px;
}
.BlackBorder tr
{
background-color: #fff;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div>
<table width="400px">
<tr>
<td>
:
<input id="txtName" style="width: 100px;" />
:
<input id="txtAge" style="width: 50px;" />
<input id="txtAdd" type="button" value=" " onclick="return insertRow()" />
</td>
</tr>
<tr>
<td>
<table id="tMemInfo" width="100%" class="BlackBorder" cellpadding="0" cellspacing="1"
border="0" style="padding-left: 5px;">
<tr style="background-color: #E0E0E0;">
<td style="width: 150px;">
</td>
<td style="width: 100px;">
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
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=' ' style='display:none'/> " +
" <input type='button' value='�Υ�' style='display:none'/>" +
" <input type='button' value=' ' />" +
" <input type='button' value=' ' />";
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とset Intervalの�^e//1 1
window.setInterval(" ��1", 1000);
// 1 2
window.setTiemout(" ��2", 1000);
6 js取得文字列の長さvar str = str.replace(/[^\x00-\xff]/g, "**").length;
7 javascriptの中のいくつかの検証//
function trim(str) {
return str.replace(/(^\s*)|(\s*$)/g, "");
}
//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);
}
更新中です.