`

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

 
阅读更多
<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代码:

 

 

 

 

  • 大小: 10.1 KB
分享到:
评论

相关推荐

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    HTML TABLE批量添加行与删除行

    HTML TABLE批量添加行与删除行.javascript实现。

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...

    jstable添加行删除行复制行

    在`jstable添加行删除行复制行.html`这个示例文件中,可以看到这些概念是如何具体实现的。通过阅读和理解代码,你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时,也可以结合CSS和jQuery等库来增强...

    table JS 添加行和删除行

    在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示或者管理界面非常实用。 首先,让我们了解HTML表格的基本结构。一个简单的HTML表格由`&lt;table&gt;`标签定义,每...

    添加删除TABLE行

    javascript添加删除table行

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...

    JavaScript动态操作表格,添加,删除行、列及单元格

    在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`&lt;table...

    使用javascript脚本操作table

    使用javascript脚本向页面中的table添加和删除行

    table动态添加行

    4. **事件绑定**:对于删除行功能,通常我们会将删除操作绑定到行的右键菜单或行的特定图标上,这需要使用`addEventListener`为每个行添加事件监听器。 这样,我们就实现了基本的`HTML`表格动态添加和删除行的功能...

    javascript操作table(增加/删除行/单元格)

    对表格的行和列进行插入/删除,并对每行添加行号

    javascript清空table表格的方法

    本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...

    JS动态添加、删除Table行排序(删除整行、删除整列)

    这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行,并实现排序功能,包括删除整行和整列。以下是对这些概念的详细解释: 1. **动态添加Table行:** 要动态添加行,我们可以使用`document....

    JQuery动态添加删除table行.

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...

    jquery table 添加、删除行、列 utf-8

    以上就是使用 jQuery 对表格进行添加、删除行与列的基本操作。在实际应用中,可能需要结合具体的业务需求进行调整,如添加动画效果、验证数据等。通过熟练掌握这些基本技巧,可以大大提高网页交互的灵活性和用户体验...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    js 操作 增加删除Table行

    本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`&lt;table&gt;`元素、`&lt;tr&gt;`(表格行)元素、`&lt;td&gt;`(表格数据单元格)元素组成。如果...

    jquery table 添加、删除行、列

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对表格(table)的操作。本文将深入探讨如何使用jQuery实现表格的添加、删除行和列的功能,以便于动态更新和管理HTML表格内容。 ...

Global site tag (gtag.js) - Google Analytics