使用DOM操作实现表格隔行变色、高亮及新增行

最新推荐文章于 2022-07-14 19:00:59 发布
最新推荐文章于 2022-07-14 19:00:59 发布
阅读量401 收藏 1
点赞数
文章标签： HTML DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DALOCAN/article/details/100889628
版权

使用DOM操作实现表格隔行变色、高亮及新增行

第一次发剥壳

根据前端的学习视频，加上自己的一些想法，将函数封装，代码优化。最后输出的一个熟悉DOM操作的文档，希望和大家一起学习探讨嘻嘻。

1.样式代码

<style>
			table,th,td{
				border: 1px solid black;
				border-collapse: collapse;
			}
			th,td{
				padding: 5px 50px;
				text-align: center;
			}
			a{
				color: #0000FF;
				text-decoration: underline;
				cursor: pointer;
			}
		</style>

2.HTML主要代码

<body>
		<input id='txt1'type='text' placeholder='请输入' />
		<input id='btn1'type='button' value='添加' />
		<table id='tab1'>
			<thead>
				<th>编号</th>    <!--表格结构<thead><th></th></thead> -->
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</thead>
			<tbody>                <!--tbody->tr->td-->
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>11</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>22</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>33</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>4</td>
					<td>苏一</td>
					<td>44</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>5</td>
					<td>陈五</td>
					<td>35</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>

3.js代码

<script>
			window.onload = function(){
				var oTab1 = document.getElementById('tab1');
				var aTr = document.getElementsByTagName('tr');
				var oldcolor = '';  //变量定义的位置,暂存表格行的颜色
				var oTxt1 = document.getElementById('txt1');
				var oBtn1 = document.getElementById('btn1');
				var id = oTab1.tBodies[0].rows[oTab1.tBodies[0].rows.length-1].cells[0].innerHTML;  //最大的ID
				//var aA = document.getElementsByClassName('a_del');   //利用js添加的删除链接需要同时设置id才可行
				var aA = document.getElementsByTagName('a');
				//alert(id);
				//alert(oTab1.tBodies[0].rows[0].cells[0].innerHTML);
				//var oTab1 = document.getElementById('tab1');
				//删除函数//
				function del(){
					for(var i=0;i<aA.length;i++){
						aA[i].onclick = function(){
							//oTab1.removeChild(aA[i].parentNode);
							oTab1.tBodies[0].removeChild(this.parentNode.parentNode);  //使用this的地方换成aA[i]就出问题了？？
						}
					}
				}
				//添加功能按钮//
				oBtn1.onclick = function(){
					add();
					del();
					css();				//每次添加一个都需要刷新一次样式,可以放在CSS中编写
				}
				//添加函数//
				function add(){
					var aTxt1 = oTxt1.value.split(' ');  //将输入框中的文本进行切割,放在数组中
					//alert(aTxt1[1]);
					var oTr = document.createElement('tr');
					var oTd1 = document.createElement('td');
					var oTd2 = document.createElement('td');
					var oTd3 = document.createElement('td');
					var oTd4 = document.createElement('td');
					oTd1.innerHTML = ++id;
					oTd2.innerHTML = aTxt1[0];
					oTd3.innerHTML = aTxt1[1];
					oTd4.innerHTML = '<a>删除</a>';
					//for(var i=0;i<aTxt1.length;i++){}
					oTr.appendChild(oTd1);
					oTr.appendChild(oTd2);
					oTr.appendChild(oTd3);
					oTr.appendChild(oTd4);
					oTab1.tBodies[0].appendChild(oTr);					
				}
				//为表格刷新样式//
				function css(){
					//隔行变色的函数//
					function color(){
						for(i=0;i<oTab1.tBodies[0].rows.length;i++){
							if(i%2){
							oTab1.tBodies[0].rows[i].style.background = "#229922";
							}else{
								oTab1.tBodies[0].rows[i].style.background = "#ffffff";
							}						
						}
					}					
					//高亮函数//
					function highLight(){
						for(var i=0;i<oTab1.tBodies[0].rows.length;i++){					
							oTab1.tBodies[0].rows[i].onmouseover = function(){
								//oldColor = this.style.background;
								//alert(oldColor);
								this.style.background = "#22ff22";
							}
							oTab1.tBodies[0].rows[i].onmouseout = function(){
								color();
								//this.style.background = oldColor;
							}
						}
					}
					color();
					highLight();
				}
				css();				
				del();
			}
		</script>

4.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作</title>
		<style>
			table,th,td{
				border: 1px solid black;
				border-collapse: collapse;
			}
			th,td{
				padding: 5px 50px;
				text-align: center;
			}
			a{
				color: #0000FF;
				text-decoration: underline;
				cursor: pointer;
			}
		</style>
		<script>
			window.onload = function(){
				var oTab1 = document.getElementById('tab1');
				var aTr = document.getElementsByTagName('tr');
				var oldcolor = '';  //变量定义的位置,暂存表格行的颜色
				var oTxt1 = document.getElementById('txt1');
				var oBtn1 = document.getElementById('btn1');
				var id = oTab1.tBodies[0].rows[oTab1.tBodies[0].rows.length-1].cells[0].innerHTML;  //最大的ID
				//var aA = document.getElementsByClassName('a_del');   //利用js添加的删除链接需要同时设置id才可行
				var aA = document.getElementsByTagName('a');
				//alert(id);
				//alert(oTab1.tBodies[0].rows[0].cells[0].innerHTML);
				//var oTab1 = document.getElementById('tab1');
				//删除函数//
				function del(){
					for(var i=0;i<aA.length;i++){
						aA[i].onclick = function(){
							//oTab1.removeChild(aA[i].parentNode);
							oTab1.tBodies[0].removeChild(this.parentNode.parentNode);  //使用this的地方换成aA[i]就出问题了？？
						}
					}
				}
				//添加功能按钮//
				oBtn1.onclick = function(){
					add();
					del();
					css();				//每次添加一个都需要刷新一次样式,可以放在CSS中编写
				}
				//添加函数//
				function add(){
					var aTxt1 = oTxt1.value.split(' ');  //将输入框中的文本进行切割,放在数组中
					//alert(aTxt1[1]);
					var oTr = document.createElement('tr');
					var oTd1 = document.createElement('td');
					var oTd2 = document.createElement('td');
					var oTd3 = document.createElement('td');
					var oTd4 = document.createElement('td');
					oTd1.innerHTML = ++id;
					oTd2.innerHTML = aTxt1[0];
					oTd3.innerHTML = aTxt1[1];
					oTd4.innerHTML = '<a>删除</a>';
					//for(var i=0;i<aTxt1.length;i++){}
					oTr.appendChild(oTd1);
					oTr.appendChild(oTd2);
					oTr.appendChild(oTd3);
					oTr.appendChild(oTd4);
					oTab1.tBodies[0].appendChild(oTr);					
				}
				//为表格刷新样式//
				function css(){
					//隔行变色的函数//
					function color(){
						for(i=0;i<oTab1.tBodies[0].rows.length;i++){
							if(i%2){
							oTab1.tBodies[0].rows[i].style.background = "#229922";
							}else{
								oTab1.tBodies[0].rows[i].style.background = "#ffffff";
							}						
						}
					}					
					//高亮函数//
					function highLight(){
						for(var i=0;i<oTab1.tBodies[0].rows.length;i++){					
							oTab1.tBodies[0].rows[i].onmouseover = function(){
								//oldColor = this.style.background;
								//alert(oldColor);
								this.style.background = "#22ff22";
							}
							oTab1.tBodies[0].rows[i].onmouseout = function(){
								color();
								//this.style.background = oldColor;
							}
						}
					}
					color();
					highLight();
				}
				css();				
				del();
			}
		</script>
	</head>
	<body>
		<input id='txt1'type='text' placeholder='请输入' />
		<input id='btn1'type='button' value='添加' />
		<table id='tab1'>
			<thead>
				<th>编号</th>    <!--表格结构<thead><th></th></thead> -->
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
			</thead>
			<tbody>                <!--tbody->tr->td-->
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>11</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>22</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>33</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>4</td>
					<td>苏一</td>
					<td>44</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
				<tr>
					<td>5</td>
					<td>陈五</td>
					<td>35</td>
					<td><a class='a_del'>删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

附上效果图
在这里插入图片描述
欢迎大佬们赐教一些学习前端的途径和学习路线。

秃头工人
关注
JS之隔行变色
小书包的博客
01-09 909
JS之隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行变色</title> </head> <style> * { margin: 0px; padding: 0px; } di...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
使用DOM方法实现表格的隔行变色效果
摘取天上星
11-15 1036
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 -->         111111111111  111111111111         222222222222  22
使用dom实现隔行变色
AFei_student的专栏
03-07 1188
隔行变色   function getColor(){             varta=document.getElementsByName("tab1");             vartr1=document.getElementsByTagName("tr");               //alert(color);                     //ale
135.DOM效果实现:表格的隔行变色
qq_56008519的博客
07-14 454
效果图第一个表格点击后一列的表格会变色第二个表格隔行变色第三个表格点击后一行的表格会变色三个表格的基本样式css部分html部分。
DOM实现隔行变色功能
liuguoxuanvip的博客
01-22 308
                                                 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
12-04
在网页设计中，表格（Table）是常见的数据展示方式，而为了提高用户体验，常常需要对表格进行美化，比如隔行变色以及高亮显示当前选中的行。本篇将详细介绍如何使用jQuery实现这一功能。 首先，jQuery是一个轻量级...
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
10-22
本文将详细介绍如何使用jQuery库，通过简单的代码实现两个常见的表格操作：隔行变色以及点击行变色。 首先，让我们来了解一下什么是jQuery。jQuery是一个快速、小巧、功能丰富的JavaScript库。它封装了JavaScript...
原生JS操作网页给p元素添加onclick事件及表格隔行变色
10-26
其次，表格隔行变色也是常见的网页视觉效果之一，可以增加用户的视觉体验。通过CSS可以较容易地实现这一效果，但在原生JS中实现则需要通过脚本动态改变样式。在本例中，首先通过document.getElementById()方法获取到...
用JQuery实现表格隔行变色和突出显示当前行的代码
10-28
在本篇文章中，作者详细介绍了如何利用JQuery实现表格隔行变色和突出显示当前行的功能。JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。使用JQuery可以大大简化...
jQuery实现隔行背景色变色
12-10
隔行变色有很多中方法来实现，之前我都是直接将判断代码写在程序中，今天我们来使用jQuery实现，代码奉上~ jQuery代码： 代码如下:        $(function(){             var item = $(“tr”);             for(var i=0;i<item.length;i++){                 if(i%2==0){                     item[i].style.backgroundColor=”#888″;                 }             }       
jquery实现表格隔行换色效果
10-23
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能，感兴趣的朋友可以参考下
dom实现隔行变色的效果
02-27 826
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 表格格行变色的效果 function getRed(){  var co1=document.getElementsByName("aaa");  //alert(co1.length);   fo
Dom实现表格的隔行变色代码
mayanling0113的专栏
02-27 301
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function editcolor1(){  var colo
使用节点树方式实现表格偶数行变色
12-01 177
DOM中所有节点的父对象是document parentNode:父节点 childNodes:所有的子节点 firstChild:第一个子元素 lastChild:最后一个子元素 ~~~~~~~~~~~~~~~ childNodes:类数组对象， 　　　　　　*动态集合*：自己不保存任何实际数据 　　　　　　　　　　　　每使用一次都重新查找一遍 for(var i=0...
JS实现表单隔行换色，鼠标移入高亮
御晨风而归
04-11 1777
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div...
【javascript】Dom操作 表格的添加行，删除行，修改行，
口袋里的小龙的专栏
07-25 4215
Dom操作 表格的添加行，删除行，修改行
创建动态表格（节点创建以及表格隔行变色）
小漠007的专栏
03-17 1788
table{border:1px #FF0000 groove;} .r1{border:1px #0000FF dotted;background-color:#FFFFFF;} .r2{background-color:#00FFFF;}; function createTale(row,col){ var table=document.createElement("t
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值