<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>js操作dom对象实例</title>
</head>
<script language="javascript">
//内存中保存用户ID的变量
var userID=0;
//在页面上添加用户的函数<br />
function addNewUser(userName){
//取得输入的用户名
userName=document.getElementById("userName").value;
if(userName==""){
window.alert("请输入用户名");
return;
}
//用户ID自增,保持唯一
userID++;
//创建一个新行
var row=document.createElement("tr");
//注意这句:标识后面删除时dom对象的唯一ID,ID确定后不受全局变量userID的影响
var ID=userID+userName;
row.setAttribute("id",ID);
//加入ID列
var cell=document.createElement("td");
cell.appendChild(document.createTextNode(userID));
row.appendChild(cell);
//加入用户名列
var cell1=document.createElement("td");
cell1.appendChild(document.createTextNode(userName));
row.appendChild(cell1);
//加入删除才操作列
var deleteButton=document.createElement("input");
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","删除");
//设置删除按钮用的js函数:
deleteButton.οnclick=function(){deleteUser(ID);};
cell=document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
//将行加入到表格中<br />
document.getElementById("userTable").appendChild(row);
//清空输入框
document.getElementById("userName").value="";
}
//删除表格中用户数据的函数
function deleteUser(id){
if(confirm("确认要删除用户吗? "+id)){
var rowToDelete=document.getElementById(id);
var userList=document.getElementById("userTable");
for(var i=0;i<userList.size;i++){
alert(userList.attributes);
}
//从表格中移除用户数据行
userList.removeChild(rowToDelete);
}
}
</script>
<body>
<B>用户信息管理</B><br>
<input id="userName" type="text" size="15" />
<input type="button" name ="addUser" value="增加用户" onClick="addNewUser();"/>
<table border="1">
<tr>
<td>用户ID</td>
<td>用户名字</td>
<td>操作</td>
</tr>
<tbody id="userTable"></tbody>
</table>
</body>
</html>
初学js,领略到了js变量的强大,谨以此代码纪念一下对js的无语。。。。。