javascript-兑现用户信息的输入和删除
日期：2014-05-16 浏览次数：20407 次
javascript--实现用户信息的输入和删除
<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.onclick=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的无语。。。。。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
