智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级
表格应用
1. 获取
tBodies、tHead、tFoot、rows、cells
注意： 一个表格可以有多个tbody （所以tBodies是复数，是一个数组），但是只能有一个thead，一个tfoot （tHead和tFoot不是数组，只是一个元素）。
表格.tBodies[0] == 表格.getElementsByTagName(“tbody”)[0]
<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>IDtd>
<td>姓名td>
<td>年龄td>
thead>
<tbody>
<tr>
<td>1td>
<td>Lisatd>
<td>25td>
tr>
<tr>
<td>2td>
<td>Bluetd>
<td>27td>
tr>
<tr>
<td>3td>
<td>张三td>
<td>23td>
tr>
<tr>
<td>4td>
<td>李四td>
<td>28td>
tr>
<tr>
<td>5td>
<td>王五td>
<td>24td>
tr>
tbody>
table>
body>
html>2. 隔行变色
简单的隔行变色：
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<script>
window.onload = function()
{
var oTab = document.getElementById("tab1");
//for(var i=0; i
for(var i=0; i0 ].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>IDtd>
<td>姓名td>
<td>年龄td>
thead>
<tbody>
<tr>
<td>1td>
<td>Lisatd>
<td>25td>
tr>
<tr>
<td>2td>
<td>Bluetd>
<td>27td>
tr>
<tr>
<td>3td>
<td>张三td>
<td>23td>
tr>
<tr>
<td>4td>
<td>李四td>
<td>28td>
tr>
<tr>
<td>5td>
<td>王五td>
<td>24td>
tr>
tbody>
table>
body>
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
for(var i=0; i0 ].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>IDtd>
<td>姓名td>
<td>年龄td>
thead>
<tbody>
<tr>
<td>1td>
<td>Lisatd>
<td>25td>
tr>
<tr>
<td>2td>
<td>Bluetd>
<td>27td>
tr>
<tr>
<td>3td>
<td>张三td>
<td>23td>
tr>
<tr>
<td>4td>
<td>李四td>
<td>28td>
tr>
<tr>
<td>5td>
<td>王五td>
<td>24td>
tr>
tbody>
table>
body>
html>3. 添加、删除一行
DOM方法的使用
<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 = "删除";
oTd.innerHTML = '删除';
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>IDtd>
<td>姓名td>
<td>年龄td>
<td>操作td>
thead>
<tbody>
<tr>
<td>1td>
<td>Lisatd>
<td>25td>
<td>td>
tr>
<tr>
<td>2td>
<td>Bluetd>
<td>27td>
<td>td>
tr>
<tr>
<td>3td>
<td>张三td>
<td>23td>
<td>td>
tr>
<tr>
<td>4td>
<td>李四td>
<td>28td>
<td>td>
tr>
<tr>
<td>5td>
<td>王五td>
<td>24td>
<td>td>
tr>
tbody>
table>
body>
html>4. 搜索
版本1：基础版本——字符串比较
<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; i0 ].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>IDtd>
<td>姓名td>
<td>年龄td>
<td>操作td>
thead>
<tbody>
<tr>
<td>1td>
<td>Lisatd>
<td>25td>
<td>td>
tr>
<tr>
<td>2td>
<td>Bluetd>
<td>27td>
<td>td>
tr>
<tr>
<td>3td>
<td>张三td>
<td>23td>
<td>td>
tr>
<tr>
<td>4td>
<td>李四td>
<td>28td>
<td>td>
tr>
<tr>
<td>5td>
<td>王五td>
<td>24td>
<td>td>
tr>
tbody>
table>
body>
html>版本2：忽略大小写——大小写转换
版本3：模糊搜索——search的使用
str1.search(str2)： 若str1中包含str2， 返回出现的位置（从0开始），否则返回-1。
版本4：多关键词——split
筛选出符合条件的
5. 排序
移动Li
<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>1li>
<li>2li>
<li>3li>
<li>4li>
ul>
<input id="btn1" type="button" value="移动" />
<ul id="ul2">
ul>
body>
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>1li>
<li>2li>
<li>3li>
<li>4li>
ul>
ul>
body>
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; ifunction (li1, li2) {
var num1 = parseInt(li1.innerHTML);
var num2 = parseInt(li2.innerHTML);
return num1-num2;
});
for(var j=0; j"该把"+arr[j].innerHTML+"插入到最后");
oUl1.appendChild(arr[j]);
}
};
};
script>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
<li>34li>
<li>25li>
<li>9li>
<li>88li>
<li>54li>
ul>
body>
html> 表单应用
1. 表单基础知识
什么是表单
向服务器提交数据，比如：用户注册
action 提交到哪里
2. 表单事件
onsubmit 提交时发生
onreset 重置时发生
<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
*后台数据检查