表格应用
1. 获取
tBodies、tHead、tFoot、rows、cells
注意: 一个表格可以有多个tbody (所以tBodies是复数,是一个数组),但是只能有一个thead,一个tfoot (tHead和tFoot不是数组,只是一个元素)。
表格.tBodies[0] == 表格.getElementsByTagName(“tbody”)[0]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
//alert(oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[2].getElementsByTagName("td")[1].innerHTML);
alert(oTab.tBodies[0].rows[2].cells[1].innerHTML);
};
</script>
<body>
<table id="tab1" border="1" width="500px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lisa</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>5</td>
<td>王五</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
2. 隔行变色
简单的隔行变色:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
//for(var i=0; i<oTab.rows.length; i++) 如果不指明tBodies, 那么会将tHead和tFoot也算进去
for(var i=0; i<oTab.tBodies[0].rows.length; i++)
{
if(i%2)
{
oTab.tBodies[0].rows[i].style.background = "#ccc";
}
else
{
oTab.tBodies[0].rows[i].style.background = "";
}
}
};
</script>
<body>
<table id="tab1" border="1" width="500px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lisa</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>5</td>
<td>王五</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
鼠标移入高亮:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
var oldColor = "";
//for(var i=0; i<oTab.rows.length; i++) 如果不指明tBodies, 那么会将tHead和tFoot也算进去
for(var i=0; i<oTab.tBodies[0].rows.length; i++)
{
oTab.tBodies[0].rows[i].onmouseover = function()
{
oldColor = this.style.background; // 保存原来的背景颜色
this.style.background = "green";
};
oTab.tBodies[0].rows[i].onmouseout= function()
{
//this.style.background = ""; //鼠标移出后会将原来的背景色去掉
this.style.background = oldColor;
};
if(i%2)
{
oTab.tBodies[0].rows[i].style.background = "#ccc";
}
else
{
oTab.tBodies[0].rows[i].style.background = "";
}
}
};
</script>
<body>
<table id="tab1" border="1" width="500px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lisa</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>5</td>
<td>王五</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
3. 添加、删除一行
DOM方法的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
var oName = document.getElementById("name");
var oAge = document.getElementById("age");
var oBtn = document.getElementById("btn1");
var id = oTab.tBodies[0].rows.length + 1;
oBtn.onclick = function()
{
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
//oTd.innerHTML = oTab.tBodies[0].rows.length + 1; //出现问题:如果中间删除一行后,新添加的id有重复
oTd.innerHTML = id++;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);
var oTd = document.createElement("td");
//oTd.innerHTML = "<a href=javascript:;>删除</a>";
oTd.innerHTML = '<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName("a")[0].onclick = function()
{
//oTab.removeChild(this.parentNode.parentNode); //出错,必须写上tBodies
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
//oTab.appendChild(oTr);
oTab.tBodies[0].appendChild(oTr);
};
};
</script>
<body>
姓名:<input id="name" type="text" />
年龄:<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lisa</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>王五</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
4. 搜索
版本1:基础版本——字符串比较
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
var oName = document.getElementById("name");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
for(var i=0; i<oTab.tBodies[0].rows.length; i++)
{
if(oTab.tBodies[0].rows[i].cells[1].innerHTML == oName.value)
{
oTab.tBodies[0].rows[i].style.background = "yellow";
}
else
{
oTab.tBodies[0].rows[i].style.background = "";
}
}
};
};
</script>
<body>
姓名:<input id="name" type="text" />
<input id="btn1" type="button" value="搜索" />
<table id="tab1" border="1" width="500px">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lisa</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>王五</td>
<td>24</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
版本2:忽略大小写——大小写转换
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
var oName = document.getElementById("name");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
for(var i=0; i<oTab.tBodies[0].rows.length; i++)
{
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML;
var sTxt = oName.value;
if(sTab.toLowerCase() == sTxt.toLowerCase())
{
oTab.tBodies[0].rows[i].style.background = "yellow";
}
else
{
oTab.tBodies[0].rows[i].style.background = "";
}
}
};
};
</script>
版本3:模糊搜索——search的使用
str1.search(str2): 若str1中包含str2, 返回出现的位置(从0开始),否则返回-1。
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
var oName = document.getElementById("name");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
for(var i=0; i<oTab.tBodies[0].rows.length; i++)
{
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oName.value.toLowerCase();
if(sTab.search(sTxt) != -1)
{
oTab.tBodies[0].rows[i].style.background = "yellow";
}
else
{
oTab.tBodies[0].rows[i].style.background = "";
}
}
};
};
</script>
版本4:多关键词——split
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
var oName = document.getElementById("name");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
for(var i=0; i<oTab.tBodies[0].rows.length; i++)
{
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oName.value.toLowerCase();
var arr = sTxt.split(' ');
oTab.tBodies[0].rows[i].style.background = "";
for(var j=0; j<arr.length; j++)
{
if(sTab.search(arr[j]) != -1)
{
oTab.tBodies[0].rows[i].style.background = "yellow";
}
}
/* 不能这样写,因为搜索下一个关键字时会把之前高亮的清除!!!
for(var j=0; j<arr.length; j++)
{
if(sTab.search(arr[j]) != -1)
{
oTab.tBodies[0].rows[i].style.background = "yellow";
}
else
{
oTab.tBodies[0].rows[i].style.background = "";
}
}
*/
}
};
};
</script>
筛选出符合条件的
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
var oName = document.getElementById("name");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
for(var i=0; i<oTab.tBodies[0].rows.length; i++)
{
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oName.value.toLowerCase();
var arr = sTxt.split(' ');
oTab.tBodies[0].rows[i].style.display = "none";
for(var j=0; j<arr.length; j++)
{
if(sTab.search(arr[j]) != -1)
{
oTab.tBodies[0].rows[i].style.display = "block";
}
}
}
};
};
</script>
5. 排序
移动Li
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oUl1 = document.getElementById("ul1");
var oUl2 = document.getElementById("ul2");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
var oLi = oUl1.children[0]; // 注意: 是children,而不是child
//oUl1.removeChild(oLi); //可以不用, 因为appendChild:先把元素从原来的父级上删除,然后再添加到新的父级。
oUl2.appendChild(oLi);
};
};
</script>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input id="btn1" type="button" value="移动" />
<ul id="ul2">
</ul>
</body>
</html>
或者:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oUl1 = document.getElementById("ul1");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
var oLi = oUl1.children[0];
oUl1.appendChild(oLi);
};
};
</script>
<body>
<input id="btn1" type="button" value="移动" />
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</ul>
</body>
</html>
元素排序:转换——排序——插入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oUl1 = document.getElementById("ul1");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function()
{
var aLi = oUl1.getElementsByTagName("li");
// aLi.sort(); // 错误!因为aLi并不是Array,而是一个元素集合。它没有sort方法。
// convert aLi to an array:
var arr = [];
for(var i=0; i<aLi.length; i++)
{
arr[i] = aLi[i];
}
arr.sort(function (li1, li2) {
var num1 = parseInt(li1.innerHTML);
var num2 = parseInt(li2.innerHTML);
return num1-num2;
});
for(var j=0; j<arr.length; j++)
{
alert("该把"+arr[j].innerHTML+"插入到最后");
oUl1.appendChild(arr[j]);
}
};
};
</script>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>
表单应用
1. 表单基础知识
什么是表单
向服务器提交数据,比如:用户注册
action 提交到哪里
2. 表单事件
onsubmit 提交时发生
onreset 重置时发生
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
window.onload = function()
{
var oForm = document.getElementById("form1");
oForm.onsubmit = function()
{
alert("aaa");
};
oForm.onreset = function()
{
alert("bbb");
};
};
</script>
<body>
<form id="form1" action="http://www.zhinengshe.com/">
用户名:<input id="name" type="text" /> <br />
密码:<input type="password" name="user" />
<input type="submit" />
<input type="reset" />
</form>
</body>
</html>
3. 表单内容验证
阻止用户输入非法字符 阻止事件
输入时、失去焦点时验证 onkeyup、onblur
提交时检查 onsubmit
*后台数据检查