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

<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.onclick=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=""#"" onclick=""addRow()"">添加</a>";
						td7.innerHTML = "<a href=""#"" onclick=""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" onclick="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="#" onclick="addRow()">添加</a></td>
						<td><a href="#" onclick="Row(this)">删除</a></td>
					</tr>
					<tr id="tr2" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)">
						<td><input type="checkbox" value="22"/></td>
						<td>101</td>
						<td>李四</td>	
						<td>15</td>
						<td>湖南长沙</td>
						<td><a href="#" onclick="addRow()">添加</a></td>
						<td><a href="#" onclick="Row(this)">删除</a></td>
					</tr>
					<tr id="tr3" onmouseOver=this.className="displayStyle" onmouseOut=this.className="hideStyle" onclick="onClickChangeStyle(this)">
						<td><input type="checkbox" value="33"/></td>
						<td>102</td>
						<td>王五</td>	
						<td>15</td>
						<td>湖南湘潭</td>
						<td><a href="#" onclick="addRow()">添加</a></td>
						<td><a href="#" onclick="Row(this)">删除</a></td>
					</tr>
				</table>
			</form>	
	</body>
</html>

你可能感兴趣的:(javascript对table的添加,删除行的操纵 发布时间:2011-08-19 发布来源:)