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">基本信息 用户组管理 修改密码</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> </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=">>" name="addButton"><br><br> <input type="Button" onClick="deleteGroups()" value="<<" 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> </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" * */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" * name="code">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);}