JavaScript网页奇效学习笔记3-JavaSript-爱易网页

JavaScript网页奇效学习笔记3

日期：2014-05-16　浏览次数：20312 次

JavaScript网页特效学习笔记3

挺长时间没有写博客了，有些知识有写模糊了，今天在写10个简单的JavaScript特效吧！

1、Enter键实现Tab键功能

有些时候我们注册表单的时候，会发现只要按Enter键，光标便进入的到了下一个注册选项，提高了用户的注册速度。和Tab键的功能一样，可以通过将Enter键的功能转换为Tab键的功能。

<span style="font-size:12px;"><html>
	<head>
		<title>Enter键实现Tab键功能</title>
		<script type="text/javascript">
			function changeFocus()
			{
				if(event.keyCode == 13)
				{
					event.keyCode = 9;
				}
			}
		</script>
	</head>
	<body>
		<input type="text" onkeydown="changeFocus()"><br/>
		<input type="text" onkeydown="changeFocus()"><br/>
		<input type="text" onkeydown="changeFocus()"><br/>
		<input type="text" onkeydown="changeFocus()"><br/>
		<input type="text" onkeydown="changeFocus()"><br/>
		<input type="text" onkeydown="changeFocus()"><br/>
	</body>
</html>

</span>

2、Enter自动生成新行

这个特效是当鼠标放在某个地方的时候，按住Enter键便生成了一个新行，通常会用到insertRow,insertCell属性。

<html>
	<head>
		<title>Enter自动生成新行</title>
		<script type="text/javascript">
			function newRow()
			{
				if(event.keyCode == "13")
				{
					var row = tb1.insertRow(1);
					row.height = "50";
					var cell1 = row.insertCell(0);
					var cell2 = row.insertCell(1);
					cell1.innerHTML = "新行1列";
					cell2.innerHTML = "新行2列";
				}
			}
		</script>
	</head>
	<body>
		鼠标放到第二列，然后按回车键<br/>
		<table id="tb1" border="1" width="280px" cellspacing="0" borderColor="green">
			<tr bgColor="red"><td>1</td><td onkeypress="newRow()">2</td></tr>
		</table>
	</body>
</html>

3、表格的行和列的遍历

在开发的过程中，经常会对表格进行一些简单的遍历的操作，其实这个遍历很简单，当获取到表格的对象的时候，可以根据表格的行的数组大小，遍历每行的单元格。两个for循环就行了。

<html>
	<head>
		<title>表格的行和列的遍历</title>
		<script type="text/javascript">
			function viewCell()
			{
				table = document.getElementById("tab1");
				var count = 1;
				for (var i = 0; i< table.rows.length;i++ )
				{
					for (var j = 0;j<table.rows[i].cells.length ;j++ )
					{
						table.rows[i].cells[j].innerText = "第"+count+"个单元格被遍历了";
						count++;
					}
				}
			}
		</script>
	</head>
	<body onload="viewCell()">
		<table id="tab1" border="1" cellspacing="0" cellpadding="20" borderColor="blue">
			<tr><td></td><td></td><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td><td></td><td></td></tr>
		</table>
	</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript网页奇效学习笔记3

相关资料更多>

推荐阅读更多>