javascript对table的添加，删除行的操作

zhou363667565

浏览: 1971981 次
性别:
来自: 深圳

最近访客更多访客>>

cyclonejava

冰~水

yang_50

hh_qq_love_hi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

<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="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" 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="deleteRow(this)">删除</a></td>
					</tr>
					<tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" 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="deleteRow(this)">删除</a></td>
					</tr>
					<tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" 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="deleteRow(this)">删除</a></td>
					</tr>
				</table>
				

			</form>	
	</body>

以下是使用javascript对表格的添加行,删除行,进行操作..

具体代码如下:

style样式代码:

<style>
	  .displayStyle{
	 		background-color:00FFFF;
	 	}	
	 	
	 	.hideStyle{
	 		background-color:#FFFFF;
	 	}
	 	
	 	.onClickStyle{
	 		background-color:00FF00;
	 	}
	 	
	 	a{
	 		color:red;
	 	}
	 	
	 	a:hover{
	 		color:green;	
	 	}
</style>

javascript代码:

<script>
var selectRow=null; 
//单击时,改变样式;
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){
	   			  //为选中的当前，设置css样式;
	   			  selectRow  = tab.rows[i];
	   			  tab.rows[i].className= "onClickStyle";
	   		}else{
	   			  //把没有选中的行的背景样式设置为白色;
		   			tab.rows[i].className= "hideStyle";
	   		}
	   }	
}

//鼠标移入时，改变颜色;
function onmouseOverMethod(selectThis){
	  selectThis.className="displayStyle";
	  if(selectRow==selectThis){
	  		selectThis.className="onClickStyle";
	  }
}

//鼠标移除时，改变背景颜色;
function onmouseOutMethod(selectThis){
	 selectThis.className="hideStyle";
	 if(selectRow == selectThis){
	 	 selectThis.className="onClickStyle";
	}
}

//添加行;
function addRow(){
		var tab = document.getElementById('tab');
	  var rowIndex = tab.rows.length+1;

	  //添加一行;
		var tr  = tab.insertRow();
		tr.onmouseover = tr.className="displayStyle" ;
		tr.onmouseout = tr.className="hideStyle" ;
		tr.onclick=function (){this.className="onClickChangeStyle(this)";}
			
		var td1 = tr.insertCell();
		var td2 = tr.insertCell();
		var td3 = tr.insertCell();
		var td4 = tr.insertCell();
		var td5 = tr.insertCell();
		var td6 = tr.insertCell();
		var td7 = tr.insertCell();
		
		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='deleteRow(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 deleteRow(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>

HTML代码: