蓝杰JavaScript学习笔记

JS表格动态增删

最新推荐文章于 2019-05-26 19:36:14 发布

原创最新推荐文章于 2019-05-26 19:36:14 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #IE #Firefox #HTML #ViewUI

Web技术专栏收录该内容

7 篇文章

订阅专栏

这两天花了点时间温故了一下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="增加新用户" onclick="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.onclick=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);
	  }
	}