DOM表格简单购物车、表格隔行变色、表格行颜色随鼠标移动变色

最新推荐文章于 2025-09-14 15:46:19 发布

原创最新推荐文章于 2025-09-14 15:46:19 发布 · 528 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

04 javascript 专栏收录该内容

25 篇文章

订阅专栏

这篇博客介绍了如何使用DOM访问和操作HTML表格，包括获取表格元素的属性和方法，如rows和cells。内容涉及表格的增删改查，特别是实现购物车功能，以及表格隔行变色和行颜色随鼠标移动变化的效果。

DOM访问表格元素

常用属性和方法

rows[index]返回表格指定的行为对应属性

cells[index]返回表格指定的列所对应的属性

DOM访问表格元素

常用属性和方法

caption 返回表格的标题对象
rows 返回该表格里的所有表格行
tbodies 返回该表格里所有<tbody .../>元素组成的数组
tfoot 返回该表格里所有<tfoot .../>元素组成的数组
thead 返回该表格里所有<thead .../>元素组成的数组

rows[index]返回表格指定的行为对应属性

cells 返回该表格所有单元格组成的数组

rowIndex 返回表格行在表格内的索引值

sectionRowIndex 返回表格行所在元素（tbody，thead等元素）的索引值

cells[index]返回表格指定的列所对应的属性

cellIndex 返回该表格行内的索引值

表格的增删改查

表格添加删除常用方法

insertRow(index) 在指定索引处插入1行
createCaption() 创建标题
createTFoot() 为该表格创建<tfoot...>元素，假如已存在就返回现有的
createTHead()
deleteRow(index) 删除index索引处的行
deleteCaption() 删除表格标题
deleteTFoot() 从表格删除tFoot元素及其内容
deleteTHead()

表格行添加删除方法

insertCell(index) 在index处创建一个单元格、返回新创建的单元格
deleteCell(index) 删除某行在index索引处的值

列：实现购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var otb = document.getElementById('tb');
				var btn = document.getElementById('btn');
				var name = document.getElementById('name');
				var age = document.getElementById('age');
				var price = document.getElementById('price');
				//tbodies 返回该表格里所有<tbody .../>元素组成的数组
				//rows 返回该表格里的所有表格行
				var id = otb.tBodies[0].rows.length + 1; //通过算数的数组获取行数
				btn.onclick = function() {
					var otr = document.createElement('tr'); //创建1行

					var otd = document.createElement('td'); //创建1列
					var mychbox = document.createElement('input'); //创建input元素
					mychbox.setAttribute('type', 'checkbox'); //input元素建立属性
					mychbox.setAttribute('name', 'loves'); //input元素建立属性
					otd.innerHTML = id++; //行数加1
					otd.appendChild(mychbox); //将input标签添加到列中
					otr.appendChild(otd); //将列添加到行中

					var otd = document.createElement('td');
					var myimg = document.createElement('img'); //创建img标签
					myimg.setAttribute('id', 'myimg2'); //建立img标签的属性
					myimg.setAttribute('src', 'img/0115images/Frame.jpg'); //建立img标签的属性
					otd.appendChild(myimg); //将img标签添加到列中
					otr.appendChild(otd); //将列添加到行中

					//innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML
					var otd = document.createElement('td'); //创建第二列
					otd.innerHTML = name.value;
					otr.appendChild(otd);

					var otd = document.createElement('td');
					otd.innerHTML = age.value;
					otr.appendChild(otd);

					var otd = document.createElement('td');
					otd.innerHTML = price.value;
					otr.appendChild(otd);

					var otd = document.createElement('td');
					otd.innerHTML = '<a href="javascript:;">删除</a>';
					otr.appendChild(otd); //将列添加到行中

					otd.getElementsByTagName('a')[0].onclick = function() {
						//移除选定的行
						otb.tBodies[0].removeChild(this.parentNode.parentNode);
					}
					
					//tbodies 返回该表格里所有<tbody .../>元素组成的数组
					otb.tBodies[0].appendChild(otr); //将列中的所有元素添加到行中
				}
			}
		</script>
	</head>
	<body>
		名称:<input type="text" id="name" />
		数量:<input type="text" id="age" />
		价格：<input type="text" id="price" />
		<input type="button" id="btn" value="添加" />

		<table id="tb" width="500">
			<thead>
				<td>序号</td>
				<td>图片</td>
				<td>名称</td>
				<td>数量</td>
				<td>价格</td>
				<td>操作</td>
			</thead>
			<tbody>
			</tbody>
		</table>
	</body>
</html>

结果：

删除1行

列：表格隔行变色

<body>
	<table border="1" width="500" height="50" align="center" id="tbl">
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>22</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>25</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>27</td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>29</td>
			</tr>
			<tr>
				<td>5</td>
				<td>田七</td>
				<td>30</td>
			</tr>
			<tr>
				<td>6</td>
				<td>汾九</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>
</body>

JavaScript

<script>
	window.onload = function() {
		//1获取表格
		var tbEle = document.getElementById('tbl');
		//2获取表格中评tbody的长度
		var len = tbEle.tBodies[0].rows.length;
		//3对tbody进行遍历
		for (var i = 0; i < len; i++) {
			if (i % 2 == 0) {
				tbEle.tBodies[0].rows[i].style.backgroundColor = "pink";
			} else {
				tbEle.tBodies[0].rows[i].style.backgroundColor = "gold";
			}
		}
	}
</script>

结果

列：表格行颜色随鼠标移动变色

分析：

第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
第二步：获取鼠标移上去的那行，对其设置背景颜色

列：表格行颜色随鼠标移动变色并且隔行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			 window.onload=function(){
                 //获取表格
			 	var otb=document.getElementById('tb');
			 	var oldColor='';
                 //otb.tBodies[0].rows.length获取表格行的个数
			 	//当鼠标移入时，改变此行颜色
			 	for(var i=0;i<otb.tBodies[0].rows.length;i++){
			 		otb.tBodies[0].rows[i].onmouseover=function(){
			 			oldColor=this.style.background;  //改变颜色之前先保存最初的颜色;
			 			this.style.background='green';
			 			
			 		}
				//当鼠标移出时，恢复此行颜色
			 		otb.tBodies[0].rows[i].onmouseout=function(){
			 			this.style.background=oldColor;  //还原原来的颜色;
			 			
			 		}
                  //设置隔行变色
			 		if(i%2){
			 			
			 			otb.tBodies[0].rows[i].style.background='';
			 		}else{
			 			otb.tBodies[0].rows[i].style.background='#CCC';
			 		}
			 	}
			 }
		</script>
	</head>
	<body>
			
		<table id="tb" border="1" width="500">
			<thead>
				<td>学号</td>
				<td>姓名</td>
				<td>成绩</td>
			</thead>
			<tbody>
				<tr>
					<td>1001</td>
					<td>容儿</td>
					<td>90</td>
				</tr>
				<tr>
					<td>1002</td>
					<td>小花</td>
					<td>70</td>
				</tr>
				<tr>
					<td>1003</td>
					<td>小白</td>
					<td>55</td>
				</tr>
				<tr>
					<td>1004</td>
					<td>祖儿</td>
					<td>77</td>
				</tr>
				<tr>
					<td>1005</td>
					<td>小青</td>
					<td>88</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

结果：