javascript对table的添加，删除行的操纵发布时间：2011-08-19 发布来源：

最新推荐文章于 2024-07-01 08:30:00 发布

苍月代表我

最新推荐文章于 2024-07-01 08:30:00 发布

阅读量360

点赞数

<html>
	<head>
		<script>
			  //单击时，改变样式;
				function onClickChangeStyle（obj）{
					   //获取表格对象;
					   var tab = document.getElementById（"tab"）;
					   
						 //获取当前行选择下标;
						 var currentRowIndex = obj.rowIndex;

						 //获取表格所有行数;
					   var tablRows = tab.rows.length;
					  
					   //获取表格第一行，第一列的值;
					   //var firstCellValue = tab.rows[0].cells[0].innerHTML;
					   
					   //获取表格的第一行，第一列的第一个元素的值;
					   //var firstChildValue = tab.rows[0].cells[0].firstChild.value;
					   
					   //轮回表格的所有行;并且选择的当前行，改变靠山色彩；
					   for（var i = 1;i<tablRows;i=i+1）{
					   		if（currentRowIndex == i）{
					   			  tab.rows[i].style.cssText="background-color:00FF00";
					   			  //为选中的当前，设置css样式;
					   			  //tab.rows[i].onmou搜刮引擎优化ver =tab.rows[i].className= "onClickStyle";
					   		}else{
					   			//把没有选中的行的靠山样式设置为白色;
					   			  tab.rows[i].style.cssText="background-color:white";
						   			//tab.rows[i].onmou搜刮引擎优化ver =tab.rows[i].className= "onClickStyle";
						   			//tab.rows[i].onmou搜刮引擎优化ut  =  tab.rows[i].className= "hideStyle";
					   		}
					   }	
				}
				
				//添加行;
				function addRow（）{
						var tab = document.getElementById（""tab""）;
					  var rowIndex = tab.rows.length+1;
	
					  //添加一行;
						var tr  = tab.Row（）;
						tr.onmou搜刮引擎优化ver=this.className="displayStyle" ;
						tr.onmou搜刮引擎优化ut=this.className="hideStyle" ;
						tr.οnclick=function （）{this.className="onClickChangeStyle（this）";}
							
						var td1 = tr.Cell（）;
						var td2 = tr.Cell（）;
						var td3 = tr.Cell（）;
						var td4 = tr.Cell（）;
						var td5 = tr.Cell（）;
						var td6 = tr.Cell（）;
						var td7 = tr.Cell（）;
						
						td1.innerHTML = "<input type=""hidden""/><input type=""checkbox"" value = ""1"">";
						td2.innerHTML = ""+rowIndex;
						td3.innerHTML = "测试";
						td4.innerHTML = "22";
						td5.innerHTML = "无地址";
						td6.innerHTML = "<a href=""＃"" οnclick=""addRow（）"">添加</a>";
						td7.innerHTML = "<a href=""＃"" οnclick=""Row（this）"">删除</a>";
						
						//初始化行;
						initRows（tab）;
				}
				
				//初始化行，设置序列号;
				function initRows（tab）{
					 var tabRows = tab.rows.length;
					 for（var i = 0;i<tabRows.length;i++）{
					 		tab.rows[i].cells[0].firstChild.value=i;
					}
				}
				
				//删除行;（obj代表连接对象）
				function Row（obj）{
					var tab = document.getElementById（""tab""）;
					//获取tr对象;
					var tr = obj.parentNode.parentNode;
					
					if（tab.rows.length>2）{
						//tr.parentNode，指的是，table对象;移除子节点;
						tr.parentNode.removeChild（tr）;
					}
					//从头生成行号;
					initRows（document.getElementById（""tab""））;
				}
		</script>	
		
		<style>
			  .displayStyle{
			 		background-color:00FFFF;
			 	}	
			 	
			 	.hideStyle{
			 		background-color:＃FFFFF;
			 	}
			 	
			 	.onClickStyle{
			 		background-color:00FF00;
			 	}
			 	
			 	a{
			 		color:red;
			 	}
			 	
			 	a:hover{
			 		color:green;	
			 	}
		</style>
	</head>	
	
	<body>
			<form name="myForm">
				<table width="100％" id="tab" name="tab" border="0px" style="text-align:center;">
					<tr style="background-color:0099FF;color:black;">
						<td>选择</td> 
						<td>编号</td>
						<td>姓名</td>	
						<td>春秋</td>	
						<td>地址</td>		
						<td>操纵</td>		
						<td>操纵</td>
					</tr>	
					<tr id="tr1" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" οnclick="onClickChangeStyle（this）">
						<td><input type=""hidden""><input type="checkbox" value="11"/></td>
						<td>100</td>
						<td>张三</td>	
						<td>15</td>
						<td>湖南株洲</td>
						<td><a href="＃" οnclick="addRow（）">添加</a></td>
						<td><a href="＃" οnclick="Row（this）">删除</a></td>
					</tr>
					<tr id="tr2" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" οnclick="onClickChangeStyle（this）">
						<td><input type="checkbox" value="22"/></td>
						<td>101</td>
						<td>李四</td>	
						<td>15</td>
						<td>湖南长沙</td>
						<td><a href="＃" οnclick="addRow（）">添加</a></td>
						<td><a href="＃" οnclick="Row（this）">删除</a></td>
					</tr>
					<tr id="tr3" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" οnclick="onClickChangeStyle（this）">
						<td><input type="checkbox" value="33"/></td>
						<td>102</td>
						<td>王五</td>	
						<td>15</td>
						<td>湖南湘潭</td>
						<td><a href="＃" οnclick="addRow（）">添加</a></td>
						<td><a href="＃" οnclick="Row（this）">删除</a></td>
					</tr>
				</table>
			</form>	
	</body>
</html>