JavaScript：table及其隔行变色、移入高亮、添加、搜索

  • 创建一个table
<table>
	<thead>
		<td>ID</td><td>SCORE</td><td>NAME</td>		
	</thead>

	<tbody>
		<tr>
			<td>0001</td><td>85</td><td>jack</td>
		</tr>
		<tr>
			<td>0002</td><td>80</td><td>mark</td>
		</tr>
		<tr>
			<td>0003</td><td>100</td><td>deng</td>
		</tr>
	</tbody>
</table>
  • 获取表格内第2行的第2个单元格内容：tBodie[0].rows[1].cells[1].innerHTML
	window.onload = function(){
		var oTable = document.getElementsByTagName('table')[0];

		alert(oTable.tBodies[0].rows[1].cells[1].innerHTML);
	};
  • 隔行变色：oTable.tBodies[0].rows.length获取行数，oTable.tBodies[0].rows[i].style.backgroundColor = 'gray';修改背景色。注意，如果不加tBodies[0]那么会把thead也算作一行。
	window.onload = function(){
		var oTable = document.getElementsByTagName('table')[0];

		for (var i = oTable.tBodies[0].rows.length - 1; i >= 0; i--) {
			if (i%2 == 0) {
				oTable.tBodies[0].rows[i].style.backgroundColor = 'gray';
			}
		}
	};
  • 鼠标移入高亮显示：鼠标移入某一行，某一行变成绿色
	window.onload = function(){
		var oldColor = '';
		var oTable = document.getElementsByTagName('table')[0];

		for (var i = oTable.tBodies[0].rows.length - 1; i >= 0; i--) {
			oTable.tBodies[0].rows[i].onmouseover = function(){
				oldColor = this.style.backgroundColor;
				this.style.backgroundColor = 'green';
			};
			oTable.tBodies[0].rows[i].onmouseout = function(){
				this.style.backgroundColor = oldColor;
			};
		}
	};
  • 添加行
        编号：<input id="id" type="text"></input>
	年龄：<input id="age" type="text"></input>
	姓名：<input id="name" type="text"></input>
	<input id="new" type="button" value="添加"></input>
······
<script>
	window.onload = function(){
		var oTable = document.getElementsByTagName('table')[0];

		var oNewBtn = document.getElementById('new');
		var oTxtId = document.getElementById('id');
		var oTxtAge = document.getElementById('age');
		var oTxtName = document.getElementById('name');

		//新建一行
		oNewBtn.onclick = function(){
			var oTr = document.createElement('tr');
			var oTd1 = document.createElement('td');
			var oTd2 = document.createElement('td');
			var oTd3 = document.createElement('td');

			oTd1.innerHTML = oTxtId.value; oTr.appendChild(oTd1);
			oTd2.innerHTML = oTxtAge.value; oTr.appendChild(oTd2);
			oTd3.innerHTML = oTxtName.value; oTr.appendChild(oTd3);

			oTable.tBodies[0].appendChild(oTr);
		}
</script>
  • 搜索。字符串搜索用search，如：str1 = 'hello'，str2 = 'e'，str1.search( str2 )将会返回str2的位置；如果搜索不到，返回-1。
		var oTable = document.getElementsByTagName('table')[0];

		var oNameForSearch = document.getElementById('nameForSearch');
		var oSearchBtn = document.getElementById('search');

		oSearchBtn.onclick = function(){
			for (var i = oTable.tBodies[0].rows.length - 1; i >= 0; i--) {
				var name = oTable.tBodies[0].rows[i].cells[2].innerHTML;
				if(name.search(oNameForSearch.value) != -1)
				{
					oTable.tBodies[0].rows[i].style.backgroundColor = 'yellow';
				}else{
					oTable.tBodies[0].rows[i].style.backgroundColor = '';
				}
			}
		};

所有功能完整例程

<!DOCTYPE html>
<html>
<head>
	<title>learn js</title>
<style type="text/css">
	table{
		border: 1px solid black;
	}
	thead td{
		border: 1px solid black;
		width: 150px;
		height: 30px;
		font-weight: bold;
		background-color: red;
	}
	tbody td{
		border: 1px solid black;
		width: 150px;
		height: 30px;
	}
</style>
<script>
	window.onload = function(){
		var oldColor = '';
		var oTable = document.getElementsByTagName('table')[0];

		var oNewBtn = document.getElementById('new');
		var oTxtId = document.getElementById('id');
		var oTxtAge = document.getElementById('age');
		var oTxtName = document.getElementById('name');

		var oNameForSearch = document.getElementById('nameForSearch');
		var oSearchBtn = document.getElementById('search');

		//新建一行
		oNewBtn.onclick = function(){
			var oTr = document.createElement('tr');
			var oTd1 = document.createElement('td');
			var oTd2 = document.createElement('td');
			var oTd3 = document.createElement('td');

			oTd1.innerHTML = oTxtId.value; oTr.appendChild(oTd1);
			oTd2.innerHTML = oTxtAge.value; oTr.appendChild(oTd2);
			oTd3.innerHTML = oTxtName.value; oTr.appendChild(oTd3);

			oTable.tBodies[0].appendChild(oTr);
		}

		for (var i = oTable.tBodies[0].rows.length - 1; i >= 0; i--) {
			//鼠标移入高亮
			oTable.tBodies[0].rows[i].onmouseover = function(){
				oldColor = this.style.backgroundColor;
				this.style.backgroundColor = 'green';
			};
			oTable.tBodies[0].rows[i].onmouseout = function(){
				this.style.backgroundColor = oldColor;
			};
			//隔行变色
			if (i%2 == 0) {
				oTable.tBodies[0].rows[i].style.backgroundColor = 'gray';
			}
		}

		//搜索
		oSearchBtn.onclick = function(){
			for (var i = oTable.tBodies[0].rows.length - 1; i >= 0; i--) {
				var name = oTable.tBodies[0].rows[i].cells[2].innerHTML;
				if(name.search(oNameForSearch.value) != -1)
				{
					oTable.tBodies[0].rows[i].style.backgroundColor = 'yellow';
				}else{
					oTable.tBodies[0].rows[i].style.backgroundColor = '';
				}
			}
		};
	};
</script>
</head>

<body>
	编号：<input id="id" type="text"></input>
	年龄：<input id="age" type="text"></input>
	姓名：<input id="name" type="text"></input>
	<input id="new" type="button" value="添加"></input>
	<br>
	姓名：<input id="nameForSearch" type="text"></input>
	<input id="search" type="button" value="搜索"></input>
<table>
	<thead>
		<td>编号</td><td>年龄</td><td>姓名</td>		
	</thead>

	<tbody>
		<tr>
			<td>0001</td>
			<td>85</td>
			<td>jack</td>
		</tr>
		<tr>
			<td>0002</td>
			<td>80</td>
			<td>mark</td>
		</tr>
		<tr>
			<td>0003</td>
			<td>100</td>
			<td>deng</td>
		</tr>
		<tr>
			<td>0001</td>
			<td>85</td>
			<td>jack</td>
		</tr>
		<tr>
			<td>0002</td>
			<td>80</td>
			<td>mark</td>
		</tr>
		<tr>
			<td>0003</td>
			<td>100</td>
			<td>deng</td>
		</tr>
		<tr>
			<td>0001</td>
			<td>85</td>
			<td>jack</td>
		</tr>
		<tr>
			<td>0002</td>
			<td>80</td>
			<td>mark</td>
		</tr>
		<tr>
			<td>0003</td>
			<td>100</td>
			<td>deng</td>
		</tr>
	</tbody>
</table>
</body>
</html>

 

运行结果
posted @ 2020-02-10 14:27  昨夜昙花  阅读(48)  评论(0)    收藏  举报