这两天花了点时间温故了一下JavaScript的基本用法,同上,把笔记备份一下。备份之前先展示一个简单的例子,整套源代码可以下载。
下面的代码主要演示了用js动态增加删除表格内容。
html页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>富婆客户端模拟</title>
<script language="JavaScript"
type="text/javascript"
src="fatClient.js"></script>
</head>
<body>
<h2 align="center"><font color="blue">用户信息管理</font></h2>
<hr />
请输入要添加的用户名:<input type="text" id="userName" />
<input type="button" name="addUser" value="增加新用户" οnclick="addNewUser();" />
<br />
<table border="1">
<tr >
<td>用户ID</td>
<td>用户名</td>
<td>操作</td>
</tr>
<tbody id="userTable"></tbody>
</table>
</body>
</html>
js文件:
//内存中保存用户ID的变量 var userID = 0; //添加新用户函数 function addNewUser() { //在页面上添加用户的函数 var userName = document.getElementById("userName").value; if(userName=="") { window.alert("请输入用户名!"); return ; } //用户ID自增,保持唯一 var id = ++userID; //创建一个新行 var row = document.createElement("tr"); //设置唯一表示一行的属性 row.setAttribute("id",id+userName); //加入ID列 var column_cell1 = document.createElement("td"); column_cell1.appendChild(document.createTextNode(id)); row.appendChild(column_cell1); //加入用户名 var column_cell2 = document.createElement("td"); column_cell2.appendChild(document.createTextNode(userName)); row.appendChild(column_cell2); //加入删除操作按钮 var column_cell3 = document.createElement("td"); var deleteButton = document.createElement("input"); deleteButton.setAttribute("type","button"); deleteButton.setAttribute("value","删除"); //设置删除按钮的js事件 //deleteButton.setAttribute("onclick","deleteUser('"+id+userName+"');");//在IE上不能识别,在FireFox则上可以。 deleteButton.οnclick=function(){deleteUser(userID+userName);}; /** *为什么把上面的id改成userID就运行出错呢? *因为userID是全局变量,每次删除的时候都会调用deleteUser(userID+userName), *在这里userName是正确的,但是userID始终是最后一次新增用户所设定的值。 *你觉不觉得userID像似java中的一个对象??是不是象引用传递?? **/ column_cell3.appendChild(deleteButton); row.appendChild(column_cell3); //将新建的一行添加到table中去 var tbody = document.getElementById("userTable"); tbody.appendChild(row); //清空输入框 document.getElementById("userName").value=""; } //删除指定的用户函数 function deleteUser(id) { window.alert("您选中的用户id是:"+id); var user = document.getElementById(id); var confirm = window.confirm("您确定要删除用户"+user.id+"吗?"); if(confirm) { var rowToDelete = document.getElementById(id); var userList = document.getElementById("userTable"); //从表格中删除用户数据行 userList.removeChild(rowToDelete); } }