DOM 综合练习(一)
// 练习一: 完成一个好友列表的展开闭合效果
<html>
<head>
<style type="text/css">
// 对表格中的 ul 进行样式定义
// 1. 去除无序列表的样式
// 2. 将列表的外边距取消
table ul{
list-style:none;
margin:0px;
background-color:#26e356;
// 使用 display 属性设置, 无序列表的显示方式
display:none;
padding:0px;
}
// 对表格框线进行定义
table{
border: #8080ff 1px solid;
width:80px;
}
// 对单元格框线进行定义
table td{
border:#8080ff 1px solid;
background-color:#f3c98f;
}
// 对单元格中的超链接定义样式
table td a:link,table td a:visited{
color:#1f6df1;
text-decoration:none;
}
table td a:hover{
color:#df4011;
}
// 预定义一些样式, 类加载器, 便于给标签动态加载
.open{
display:block;
}
.close{
display:none;
}
</style>
</head>
<body>
<script type="text/javascript">
// 定义事件处理方式
function list(node){
// 获取被操作的节点 ul
// 先通过事件源超链接标签获取其父节点 td, 然后在通过父节点获取 ul 节点
// 所有的容器型标签(即标签中还有标签)都具备 getElementsByTagName 方法
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
// 因为要保证一次打开一个列表, 而其他列表处于关闭状态
// 获取表格中所有的 ul 节点, 结果为数组, 即collection
// 首先获取表格节点对象
var oTabNode = document.getElementById("goodlist");
var collUlNodes = oTabNode.getElementsByTagName("ul");
// 通过 for 循环遍历, int x 为错误, 这是 java 的写法
for(var x=0; x<collUlNodes.length; x++){
if(collUlNodes[x]==oUlNode){
// 因为 ul 节点 className 的初始值为null, 所以使用 if 进行反向判断
if(oUlNode.className == "open"){
oUlNode.className = "close";
} else {
oUlNode.className = "open";
}
} else {
collUlNodes[x].className = "close";
}
}
}
</script>
<table id="goodlist">
<tr>
<td>
// 取消超链接默认点击效果, 并添加自定义事件
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>李白</li>
<li>杜甫</li>
<li>白居易</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友列表</a>
<ul>
<li>苏洵</li>
<li>苏辙</li>
<li>苏轼</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友列表</a>
<ul>
<li>历史</li>
<li>地理</li>
<li>自然</li>
<li>政治</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友列表</a>
<ul>
<li>唐朝</li>
<li>宋朝</li>
<li>元朝</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
// 需求二: 创建任意行数和列数的表格
// 思路:
// 1. 事件源, 比如按钮
// 2. 必须有一个生成的表格节点存储位置
<html>
<head>
<style type="text/css">
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:5px;
}
</style>
</head>
<body>
<script type="text/javascript">
function crtTable(){
// 既然操作的是表格, 那么最方便的方式就是使用表格节点对象的方法来完成
// 表格是由行组成, 表格节点对象中 insertRow 方法就完成了创建行并添加到该表格的动作
var oTabNode = document.createElement("table");
// 为了标识表格, 给表格起名字
// 第一种方式: oTabNode.id = "tabid";
// 第二种方式:
oTabNode.setAttribute("id","tabid");
// 获取输入的行数和列数
// document.getElemntsByName("rownum")[0] 获取到的为 input 对象,
// 还需要通过 value 获取其值, 并将其值转换为数值类型
var rowVal = parseInt(document.getElementsByName("rownum")[0].value);
var colVal = parseInt(document.getElementsByName("colnum")[0].value);
for(var x=1; x<=rowVal; x++){
var oTrNode = oTabNode.insertRow();
for(var y=1; y<=colVal; y++){
// 行是由单元格组成, 通过 tr 节点对象的 insertCell 来完成
// 创建并添加单元格的动作
var oTdNode = oTrNode.insertCell();
// 单元格中添加内容
oTdNode.innerHTML = x+"...."+y;
}
}
// 将表格节点添加到 div 中
document.getElementsByTagName("div")[0].appendChild(oTabNode);
// 创建表格的功能,只能在页面中创建一次
document.getElementsByName("crtBut")[0].disabled = true;
}
// 删除行
function delRow(){
// 获取表格对象
var oTabNode = document.getElementById("tabid");
// 判断表格是否存在
if(!oTabNode){
alert("表格不存在,请创建表格!");
return;
}
// 获取要删除的表格行数
var rowVal = parseInt(document.getElementsByName("delrow")[0].value);
// 健壮性判断, 要删除的表格行数小于总行数
if(rowVal >= 1 && rowVal<=oTabNode.rows.length){
oTabNode.deleteRow(rowVal - 1);
} else {
alert("要删除的行不存在!");
}
}
// 删除列, 其实就是在删除每一行中同一位置的单元格
function delCol(){
// 获取表格对象
var oTabNode = document.getElementById("tabid");
// 判断表格是否存在
if(!oTabNode){
alert("表格不存在,请创建表格!");
return;
}
// 获取要删除的表格列数
var colVal = parseInt(document.getElementsByName("delcol")[0].value);
// 健壮性判断
if(colVal>=1 && colVal<=oTabNode.rows[0].cells.length){
// 遍历行,并对每一行进行删除指定单元格
for(var x=0; x<oTabNode.rows.length; x++){
oTabNode.rows[x].deleteCell(colVal-1);
}
} else {
alert("要删除的列不存在!");
}
}
</script>
行:<input type="text" name="rownum"/>列:<input type="text" name="colnum"/>
<input type="button" name="crtBut" value="创建表格" onclick="crtTable()"/>
<hr/>
<input type="text" name="delrow" /><br/>
<input type="button" value="删除行" onclick="delRow()"/><br/>
<input type="text" name="delcol" /><br/>
<input type="button" value="删除列" onclick="delCol()"
<br/>
<hr/>
// 存储表格的位置
<div></div>
</body>
</html>
// 需求三: 行颜色间隔显示, 鼠标落在哪一行,颜色变化
// 对表格进行排序
<html>
<head>
<style type="text/css">
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:10px;
}
table th{
border:#249bdb 1px solid;
padding:10px;
background-color:rgb(200,200,200);
}
// 预定义样式,
.one{
background-color:#e1e16a;
}
.two{
background-color:#75f094;
}
.over{
background-color:#8deffa;
}
</style>
</head>
<body>
<script type="text/javascript">
// 定义变量, 在鼠标悬停事件中使用
var name;
function trColor(){
/*
* 思路:
* 1. 因为要操作行的样式, 所以要先获取表格对象
* 2. 获取所有被操作的行对象
* 3. 遍历行并给每一行指定样式
*/
var oTabNode = document.getElementById("info");
// 获取表格中所有的行
var collTrNodes = oTabNode.rows;
// 表格中有标题,所以要从第二行开始遍历
for(var x=1; x<collTrNodes.length; x++){
if(x%2 == 1){
collTrNodes[x].className = "one";
} else {
collTrNodes[x].className = "two";
}
// 给每行添加一个鼠标悬停和移开事件
collTrNodes[x].onmouseover = function(){
// 记录变化之前的颜色
name = this.className;
this.className = "over"; // 使用预定义样式
}
collTrNodes[x].onmouseout = function(){
this.className = name; // 恢复为之前的颜色
}
}
}
// 函数需要被调用,才能执行.
// 而函数的调用需要在网页加载完成后,执行
onload = function(){
trColor();
}
</script>
<table id="info">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>21</td>
<td>北京</td>
</tr>
<tr>
<td>李白</td>
<td>25</td>
<td>陕西</td>
</tr>
<tr>
<td>旺财</td>
<td>63</td>
<td>河南</td>
</tr>
<tr>
<td>小强</td>
<td>53</td>
<td>山西</td>
</tr>
<tr>
<td>杜甫</td>
<td>9</td>
<td>辽宁</td>
</tr>
<tr>
<td>小强</td>
<td>35</td>
<td>浙江</td>
</tr>
<tr>
<td>白居易</td>
<td>32</td>
<td>安徽</td>
</tr>
</table>
</body>
</html>
// 需求四: 对表格中的数据以年龄排序
<html>
<head>
<style type="text/css">
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:10px;
}
table th{
border:#249bdb 1px solid;
padding:10px;
background-color:rgb(200,200,200);
}
th a:link,th a:visited{
color:#279bda;
text-decoration:none;
}
</style>
</head>
<body>
<script type="text/javascript">
/*
* 思路:
* 1. 排序就需要数组. 获取需要参与排序的行对象数组
* 2. 对行数组中的每一行的年龄单元格的数据进行比较, 并完成行对象在数组中的位置置换
* 3. 将排好序的数组重新添加回表格
*/
var flag = true;
function sortTable(){
var oTabNode = document.getElementById("info");
// 获取所有的行
var collTrNodes = oTabNode.rows;
// 定义一个临时容器, 存储需要排序的行对象
// 此时存储的为对象的引用
var trArr = [];
// 表格中的第一行是标题, 不需要存储
// 遍历原行集合, 并将需要排序的行对象存储到临时容器中
for(var x=1; x<collTrNodes.length; x++){
trArr[x-1] = collTrNodes[x];
}
// 对临时容器排序
mySort(trArr);
// 将排完序的行对象添加回表格
// 正序和逆序
if(flag){
for(var x=0; x<trArr.length; x++){
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = false;
} else {
for(var x = trArr.length-1; x >= 0; x--){
trArr[x].parentNode.appendChild(trArr[x]);
}
flag = true;
}
}
// 排序方法
function mySort(arr){
for(var x=0; x<arr.length-1;x++){
for(var y=x+1; y<arr.length; y++){
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
<table id="info">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>21</td>
<td>北京</td>
</tr>
<tr>
<td>李白</td>
<td>25</td>
<td>陕西</td>
</tr>
<tr>
<td>旺财</td>
<td>63</td>
<td>河南</td>
</tr>
<tr>
<td>小强</td>
<td>53</td>
<td>山西</td>
</tr>
<tr>
<td>杜甫</td>
<td>9</td>
<td>辽宁</td>
</tr>
<tr>
<td>小强</td>
<td>35</td>
<td>浙江</td>
</tr>
<tr>
<td>白居易</td>
<td>32</td>
<td>安徽</td>
</tr>
</table>
</body>
</html>
参考资料
