javascript实例学习三
enter键实现tab的功能
重点是捕捉了onkeydown事件，并实现一个处理函数
其实就是修改了事件的属性，顺便学习一下表格的写法
<head>
<script language="javascript">
function changeFocus()
{
if(event.keyCode==13) //根据按下的键的不同可以实现各种不同的功能，以及组合键
event.keyCode=9;
}
</script>
</head>
<body>
<table id="mytbl" width="300" height="50" border="0" cellspacing="2" cellpadding="0" bgcolor="#FFb609">
<tr>
<td> <input type=text id="txt1" onKeyDown="changeFocus()" /></td>
<td> <input type=text id="txt2" onKeyDown="changeFocus()" /></td>
</tr>
<tr>
<td> <input type=text id="txt3" onkeydown="changeFocus()" /></td>
<td> <input type=text id="txt4" onKeyDown="changeFocus()" /></td>
</tr>
</table>
</body>
关闭窗口
<a href="javascript:window.close()"><br>关闭窗口</a>
为连接提供下拉菜单
<script language="javascript">
function listmenu()
{
document.all.sonMain.style.display=(document.all.sonMain.style.display=='none')?'':'none';
//实质上是控制一个层的显示与隐藏
}
</script>
</head>
<body>
<div id="main" style="color:blue; margin:4px 4px 4px 60px;" onClick="listmenu()">
<a href="#"> 我的网站<a></div>
<div id="sonMain" style="display:none; margin:4px 4px 4px 70px;">
<a href="#"> 关于开发语言</a><br>
<a href="#"> 关于程序员前途</a><br>
<a href="#"> Microsoft前进之路</a><br>
<a href="#"> Sun前进之路</a><br>
<a href="#"> 数据发展历史回眸</a><br>
<a href="#"> 数据库的由来</a><br>
<a href="#"> Web2.0时代的到来</a><br>
</div>
</body>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
表格操作相关
遍历表格的每个单元格
function viewCell()
{
var count=1; //在表格中显示的内容
for (i=0; i < document.all.tbl.rows.length; i++) { //遍历每行
for (j=0; j < document.all.tbl.rows(i).cells.length; j++) { //遍历行中的每一列
document.all.tbl.rows(i).cells(j).innerText = count; //在单元格显示数值
count++;
}
}
}
按回车键可以添加行
更改表格行列数量的方法
function newRow()
{
if(event.keyCode=="13") //如果单击的是回车键
{
var row= tbl.insertRow(1); //添加行
row.height="50"; //设置行高
var cell1= row.insertCell(0); //添加列
var cell2= row.insertCell(1); //添加列
cell1.innerHTML="第二行" //指定列内容
cell2.innerHTML="第二行第二列"
}
}
对表格进行排序
思路就是把每列中的元素放到一个数组中，将数组排序之后再将排序后的结果以此输入到表格中
function sortTable(sortType)
{
var tb=document.getElementsByTagName("table")[0]; //获取要排序的表格
var arr=[]; //初始数组
for (var i=1;i<tb.rows.length;i++) //遍历表格中每一行
arr.push(tb.rows[i].cells[sortType].innerText); //将列的数据添加到数组中
sortType==0 ? arr.sort(function (a,b) {return a-b}) : arr.sort();//数组排序
for (var j=1;j<tb.rows.length;j++)
tb.rows[j].cells[sortType].innerText=arr[j-1]; //输出排序后的结果
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
跟表单操作有关的内容
选择了哪一个单选框
一种最简单直接的方式，也可以操作复选框这样的控件
<script language="JavaScript">
function checkradio()
{
var parms=document.getElementsByName("radio1");//获取所有的单选框
var i;
for( i=0;i<parms.length;i++) //遍历单选框
{
if(parms[i].checked) //如果选择了此单选框
alert("您选择了"+ parms[i].value); //提示用户的选择
}
}
</script>
</head>
<body>
<input name="radio1" type="radio" value="体育运动" checked=checked />体育运动
<input name="radio1" type="radio" value="旅游休闲"/>旅游休闲
<input type="button" name="btn1" value="检查" onClick="checkradio()" />
</body>
单击文字实现单选框的选定
<input type="radio" name="myLike" value="Like1" id="Like1"><label for="Like1"> 体育运动:NBA</label> <br> //for 属性规定 label 与哪个表单元素绑定
<input type="radio" name="myLike" value="Like2" id="Like2"><label for="Like2"> 休闲运动:Golf</label>
两个checkbox互斥
根据选择控件的情况做出较为复杂的动作，关键在于实现的逻辑
<script language="javascript">
function sel1(obj){
if(obj.checked){ //如果当前项被选中了
document.all.chk2.checked=false //则不能选择第二组
document.all.sel1.selectedIndex=4 //指定下拉框中选择的项
}
}
function sel2(obj){
if(obj.checked){ //如果当前项被选中了
document.all.chk1.checked=false //则不能选择第一组
document.all.sel1.selectedIndex=0 //指定下拉框中选择的项
}
}
</script>
</head>
<body>
<p>A组
<input type="checkbox" name="checkbox" value="checkbox" id="chk1" onClick="sel1(this)">
</p>
<p>B组
<input type="checkbox" name="checkbox2" value="checkbox" id="chk2" onClick="sel2(this)">
</p>
<p>C
<select name="select" id="sel1">
<option selected="selected">个人</option>
<option>200米</option>
<option>400米</option>
<option>800米</option>
<option>200米接力</option>
</select>
</p>
</body>
下拉菜单
涉及到了css的一些内容，看的不是很明白
和之前看的显示和影藏一个层的方式不太一样
<script language="javascript">
//为各个菜单项定义鼠标事件
startList = function()
{
if (document.all&&document.getElementById) {
navRoot = document.getElementById("mynav");//找到菜单根目录
for (i=0; i<navRoot.childNodes.length; i++)
{
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over"; }
node.onmouseout=function() {
this.className=this.className.replace(" over", ""); }
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
body
{ font: normal 11px verdana; }
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
ul li
{ position: relative; }
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
/* 菜单项的样式 */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
li:hover ul, li.over ul { display: block; }
</style>
</head>
<body>
<ul id="mynav">
<li><a href="#">首页</a></li>
<li><a href="#">帮助</a>
<ul>
<li><a href="#">历史</a></li>
<li><a href="#">团队</a></li>
<li><a href="#">办公室</a></li>
</ul>
</li>
<li><a href="#">客服</a>
<ul>
<li><a href="http://www.google.com">网页设计</a></li>
<li><a href="#">网络销售</a></li>
<li><a href="#">站点服务</a></li>
<li><a href="#">区域服务</a></li>
</ul>
</li>
<li><a href="#">联系方式</a>
<ul>
<li><a href="#">国家</a></li>
<li><a href="#">城市</a></li>
<li><a href="#">地址</a></li>
<li><a href="#">电话</a></li>
</ul>
</li>
</ul>
</body>
