jsフロント練習-従業員情報管理
12410 ワード
1、user.js
/**
**/
var g_sSid = ""; //
var g_sName = ""; //
var g_arrSex = []; //
var g_arrHobby = []; //
var g_arrEducation = []; //
var g_oTable ; //
var g_nIndex = 0; //
var g_arrSids = []; //
var g_oAddButton ; //
/**
**/
function initPage()
{
g_sSid = byId("sid");
g_sName = byId("uname");
g_arrSex = byName("sex");
g_arrHobby = byName("hobby");
g_arrEducation = byId("education");
g_oTable = byId("tableInfo");
g_oAddButton = byId("add");
}
/**
**/
function isLenZero(arg)
{
if (arg.length == 0)
{
return " ";
}
else
{
return arg;
}
}
/**
**/
function addUserInfo()
{
if (g_arrEducation.value == 0)
{
alert(" ");
g_arrEducation.focus();
return;
}disabled
var arrArgs = [];
var temp_sexValue = getElementValue(g_arrSex);
var temp_hobbyValue = getElementValue(g_arrHobby);
var temp_educationValue = getElementValue(g_arrEducation);
arrArgs.push("<input type='checkbox' />");
arrArgs.push(g_sSid.value);
arrArgs.push(g_sName.value);
arrArgs.push(temp_sexValue);
arrArgs.push(isLenZero(temp_hobbyValue));
arrArgs.push(temp_educationValue);
arrArgs.push("<a href ='#' onclick='modifInfo(this)'> </a>");
// value
var btn = getChinaValue(byId("add").value);
//1 ，0
if (btn == 1)
{
//
for (var i = 0, len = g_arrSids.length; i < len; i++)
{
if (g_arrSids[i] == g_sSid.value)
{
alert(" !");
return;
}
}
//
g_arrSids.push(g_sSid.value);
//
createTableElements(g_oTable, arrArgs, 7);
resetInfo();
}
//
else if (btn == 0)
{
g_oTable.rows[g_nIndex].cells[1].innerHTML = g_sSid.value;
g_oTable.rows[g_nIndex].cells[2].innerHTML = g_sName.value;
g_oTable.rows[g_nIndex].cells[3].innerHTML = temp_sexValue;
g_oTable.rows[g_nIndex].cells[4].innerHTML = isLenZero(temp_hobbyValue);
g_oTable.rows[g_nIndex].cells[5].innerHTML = temp_educationValue;
byId("add").value = " ";
//
g_sSid.disabled = "false";
resetInfo();
}
}
/**
，
*/
function deleteRows()
{
//
var length = g_oTable.rows.length;
for (var i = length - 1; i > 0; i--)
{
var temp_sid = g_oTable.rows[i].cells[1].innerHTML;
if (g_oTable.rows[i].cells[0].firstChild.checked)
{
if (temp_sid == g_sSid.value)
{
alert(" ："+temp_sid+" ， ！");
}
else
{
g_oTable.deleteRow(i);
//
g_arrSids = [];
}
}
}
byId("all").checked = "";
}
/**
checkbox
*/
function selectAll(_this)
{
var inputTag = tableInfo.getElementsByTagName("input");
for (var i = 1; i < inputTag.length; i++)
{
inputTag[i].checked = _this.checked;
}
}
/**
**/
function modifInfo(_this)
{
resetInfo();
//
var row = _this.parentNode.parentNode;
g_sSid.value = row.cells[1].innerHTML;
//
g_sSid.disabled = "true";
g_sName.value = row.cells[2].innerHTML;
var temp_sex = row.cells[3].innerHTML;
var temp_hobby = row.cells[4].innerHTML.split(",");
var temp_education = row.cells[5].innerHTML;
if (temp_sex == getChinaValue("man"))
{
byId("man").checked = "checked";
}
else
{
byId("woman").checked = "checked";
}
//
for (var i = 0, len = temp_hobby.length; i < len; i++)
{
for (var j = 0, len = g_arrHobby.length; j < len; j++)
{
if (getChinaValue(g_arrHobby[j].value) == temp_hobby[i])
{
g_arrHobby[j].checked = "checked";
}
}
}
//
for (var i = 0, len = g_arrEducation.length; i < len; i++){
if (temp_education == g_arrEducation[i].text)
{
g_arrEducation[i].selected = "selected";
}
}
//
g_nIndex = row.rowIndex;
g_oAddButton.value = " ";
}
/**
**/
function createTableElements(table, args, num){
var row = table.insertRow(-1);
for (i = 0; i < num; i++)
{
var td = document.createElement("td");
td.innerHTML = args[i] ;
row.appendChild(td);
row.align = "center";
}
}
/**
**/
function resetInfo()
{
g_sSid.value = "";
g_sName.value = "";
byId("man").checked = "checked";
for (var i = 0 , len = g_arrHobby.length; i < len; i++)
{
g_arrHobby[i].checked = "";
}
g_arrEducation.options[0].selected = "selected";
g_oAddButton.value = " ";
//
g_sSid.disabled = "false";
}
/**
**/
function getElementValue(element){
var arrElement = [];
for (var i = 0, len = element.length; i < len; i++)
{
var temp_elemnet = element[i];
if ((temp_elemnet.type == "checkbox") && temp_elemnet.checked)
{
arrElement.push(getChinaValue(temp_elemnet.value));
}
else if ((temp_elemnet.type == "radio") && temp_elemnet.checked)
{
var temp_value = temp_elemnet.value;
var arrElement = temp_value == "man" ?
getChinaValue(temp_value) : getChinaValue(temp_value);
}
else if(temp_elemnet.selected)
{
arrElement = temp_elemnet.text;
}
}
return arrElement;
}
/**
document.getElementById
**/
function byId(s_id)
{
return document.getElementById(s_id);
}
/**
document.getElementsByName
**/
function byName(s_name)
{
return document.getElementsByName(s_name);
}
/**
**/
function getChinaValue(arg)
{
switch (arg)
{
case 'swim':
return ' ';
break;
case 'sing':
return ' ';
break;
case 'dance':
return ' ';
break;
case '1':
return ' ';
break;
case '2':
return ' ';
break;
case '3':
return ' ';
break;
case 'man':
return ' ';
break;
case 'woman':
return ' ';
break;
case ' ':
return 1;
break;
case ' ':
return 0;
break;
default:;
}
}
<html>
<head>
<title></title>
<link type="text/css" src="styledemo.css" rel="stylesheet"></link>
<style type="text/css">
.noborder_1{
background:#cbcbcb;
}
.noborder_2{
background:#f0f0f0;
}
</style>
<script type="text/javascript" src="userinfo.js"></script>
</head>
<body onload="initPage()">
<center>
<h1> </h1>
<table border="1" width="500px">
<tr>
<td class="noborder_1"> </td>
<td class="noborder_2" ><input style="width:80%" type="text" id="sid"/></td>
</tr>
<tr>
<td class="noborder_1"> </td>
<td class="noborder_2"><input style="width:50%" type="text" id="uname"/></td>
</tr>
<tr>
<td class="noborder_1"> </td>
<td class="noborder_2">
<input type="radio" checked name="sex" value="man" id="man"/>
<input type="radio" name="sex" value="woman" id="woman"/>
</td>
</tr>
<tr>
<td class="noborder_1"> </td>
<td class="noborder_2">
<input type="checkbox" name="hobby" value="swim"/>
<input type="checkbox" name="hobby" value="sing"/>
<input type="checkbox" name="hobby" value="dance"/>
</td>
</tr>
<tr>
<td class="noborder_1"> </td>
<td class="noborder_2">
<select id="education">
<option value="0"> </option>
<option value="1"> </option>
<option value="2"> </option>
<option value="3"> </option>
<select>
<input id="add" type="button" value=" " onclick="addUserInfo()"/>
<input id="delete" type="button" value=" "onclick="deleteRows()"/>
<input id="reset" type="reset" value=" " onclick="resetInfo()"/>
</td>
</tr>
</table>
<br>
<table border="1" width="500px" id="tableInfo">
<tr align="center">
<td class="noborder_1"><input id="all" type="checkbox" onclick="selectAll(this)" /></td>
<td class="noborder_1"> </td>
<td class="noborder_1"> </td>
<td class="noborder_1"> </td>
<td class="noborder_1"> </td>
<td class="noborder_1"> </td>
<td class="noborder_1"> </td>
</tr>
</table>
</center>
</body>
</html>