js前台练习-员工信息管理

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:;
	}
}     

2、user.html

<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">工&nbsp;&nbsp;号</td>
				    <td class="noborder_2" ><input style="width:80%" type="text" id="sid"/></td>
				</tr>
				
				<tr>
				    <td class="noborder_1">姓&nbsp;&nbsp;名</td>
				    <td class="noborder_2"><input style="width:50%" type="text" id="uname"/></td>
				</tr>
				
				<tr>
				    <td class="noborder_1">性&nbsp;&nbsp;别</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">爱&nbsp;&nbsp;好</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">学&nbsp;&nbsp;历</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>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<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>