日期:2014-05-16  浏览次数:20352 次

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&