Javascript动态增添，删除表格行的例子

Javascript动态添加，删除表格行的例子
最近又开始做Web项目，完全又成新手了，几年前就没仔细看过Javascript，但又经常用，今天写了格动态添加删除表格行的例子。以后用的时候不要在到处查资料了。
JavaScript代码

 <script type="text/javascript">
    //添加行
function addRow(tTable,gid,name,desp){
	var newTr = tTable.insertRow();
	newTr.id="item"+gid;
	//添加列
	var newTd0 = newTr.insertCell();
	var newTd1 = newTr.insertCell();
	var newTd2 = newTr.insertCell();

	//设置列内容和属性 <input type="checkbox" name="user.newGroups" value="1" id="user_newGroups">
	newTd0.innerHTML = '<input type="checkbox" name="user.newGroups" value="'+gid+'" id="user_newGroups">'; 
	newTd1.innerText= name;
	newTd2.innerText= desp;
}
 //将可选列表中选中的条目添加到已选折组中	
 function addGroups()
 {
 	var fCheckBox=document.getElementById("form2").selectableGroups;
 	var fTab=document.getElementById("sTab");
 	var tTab=document.getElementById("nTab");
 
	for(i=fCheckBox.length-1;i>=0;i--){
		if(fCheckBox[i].checked==true)
		{ 
			var gid=fCheckBox[i].value;
			var item=document.getElementById('item'+gid);
			var name=item.cells(1).innerText;
			var desp=item.cells(2).innerText;
			
			fTab.deleteRow(i+2);
			addRow(tTab,gid,name,desp);			
		}
	} 	
 }
function addRow2(tTable,gid,name,desp){
	var newTr = tTable.insertRow();
	newTr.id="item"+gid;
	//添加列
	var newTd0 = newTr.insertCell();
	var newTd1 = newTr.insertCell();
	var newTd2 = newTr.insertCell();

	//设置列内容和属性 <input type="checkbox" name="selectableGroups" value="1" id="selectableGroups">
	newTd0.innerHTML = '<input type="checkbox" name="selectableGroups" value="'+gid+'" id="selectableGroups">'; 
	newTd1.innerText= name;
	newTd2.innerText= desp;
}
 function deleteGroups()
 {
 	var fCheckBox=document.getElementById("form2").user_newGroups;
 	var fTab=document.getElementById("nTab");
 	var tTab=document.getElementById("sTab");
 
	for(i=fCheckBox.length-1;i>=0;i--){
		if(fCheckBox[i].checked==true)
		{ 
			var gid=fCheckBox[i].value;
			var item=document.getElementById('item'+gid);
			var name=item.cells(1).innerText;
			var desp=item.cells(2).innerText;
			
			fTab.deleteRow(i+2);
			addRow2(tTab,gid,name,desp);			
		}
	} 	
 }
 function updateGroup()
 {
    var form2=document.getElementById("form2");
 	var fCheckBox=form2.user_newGroups;
 
	for(i=fCheckBox.length-1;i>=0;i--){
		fCheckBox[i].checked=true;
	} 	 
	form2.submit();
 }
 </script>
...
  <form id="form2" name="form2" method="post" action="<%=basePath%>updateUserGroup.action">  
  <input type="hidden" name="user.userID" value="<%=request.getAttribute(Constants.USER_OBJECT)%>">
  <table  width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
  <td colspan="3">基本信息&nbsp;&nbsp;用户组管理&nbsp;&nbsp;修改密码</td>
  </tr>
  <tr>
  	<td width="45%">
	<table id="sTab" width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr><td colspan="3">可选用户组</td></tr>
	<tr><td>&nbsp;</td><td>名称</td><td>描述</td></tr>	
	<%List<Group> gList=(List<Group>)request.getAttribute(Constants.GROUP_LIST); 
     	Group g=null;
     	for(int i=0;i<gList.size();i++)
     	{
     	g=gList.get(i); %>
	<tr id="item<%=g.getGroupID()%>"><td><input type="checkbox" name="selectableGroups" value="<%=g.getGroupID()%>" id="selectableGroups"></td>
	<td><%=g.getName() %></td><td><%=g.getDescription() %></td></tr>	
	<%}%>
	</table> 	
  	</td>
  	<td width="10%" valign="middle" align="center">
  		<input type="Button" onClick="addGroups()" value="&gt;&gt;" name="addButton"><br><br>
  		<input type="Button" onClick="deleteGroups()" value="&lt;&lt;" name="deleteButton">
  	</td>
  	<td width="45%">
	<table id="nTab" width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr><td colspan="3">已选用户组</td></tr>
	<tr><td>&nbsp;</td><td>名称</td><td>描述</td></tr>	
	<%gList=(List<Group>)request.getAttribute(Constants.USERGROUP_LIST); 
     	g=null;
     	for(int i=0;i<gList.size();i++)
     	{
     	g=gList.get(i); %>
	<tr><td><input type="checkbox" name="user.newGroups" value="<%=g.getGroupID()%>" id="user_newGroups"></td>
	<td><%=g.getName() %></td><td><%=g.getDescription() %></td></tr>	
	<%}%>
	</table> 	  	
  	</td>
  </tr>
  <tr>
  <td colspan="3" align="right"><input type="Button" name="gButton" value="保存" onClick="updateGroup()"></td>
  </tr>  	  
  </table>
  </form> 

用户和用户组是many-to-many关系设置成用户来管理关联关系
User.java中代码

	/**
	 * @return the groups
	 * User来管理关联关系,默认不抓取
	 * @hibernate.set table="TB_UserGroup" cascade="none" inverse="false" lazy="true" 
	 * @hibernate.collection-key column="UserID"
	 * @hibernate.collection-many-to-many column="GroupID" 
     *  class="com.sst.framework.administration.vo.Group" 
	 */
	public Set getGroups() {
		return groups;
	}

Group.java中代码

	/**
	 * @return the users
	 * User来管理关联关系,默认不抓取
	 * @hibernate.set table="TB_UserGroup" cascade="none" inverse="true" lazy="true" 
	 * @hibernate.collection-key column="GroupID"
	 * @hibernate.collection-many-to-many column="UserID" 
     *  class="com.sst.framework.administration.vo.User"
	 */
	public Set getUsers() {
		return users;
	}

对应的更新User-Group关系的Service代码

	public void updateUserGroup(Long userID, Long[] groups) {
		User u=(User)dao.getObject(User.class, userID);
		HashSet ps=new HashSet();
		if(groups!=null)
			for(int i=0;i<groups.length;i++){
				ps.add(new Group(groups[i]));
			}
		u.setGroups(ps);
		dao.saveObject(u);		
	}