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>
参考资料
DOM 综合练习(一)的更多相关文章
- DOM综合案例、SAX解析、StAX解析、DOM4J解析
今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- DOM 综合练习(二)
// 需求一: 二级联动菜单 <html> <head> <style type="text/css"> select{ width:100px ...
- 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- jQuery使用（六）：DOM操作之元素包裹、克隆DOM与data的综合应用
包裹 wrap() wrapInner() wrapAll() unwrap() clone() 数据缓存机制 data 文档处理(包裹) 1.1.wrap()--将所匹配的元素用其他元素结构化标签包 ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之树菜单。主要知识点：DOM方法综合运用，递归运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
随机推荐
- 多线程-ThreadLocal，InheritableThreadLocal
ThreadLocal 变量值得共享可以使用public static变量的形式,所有的线程都使用同一个public static变量.如果想实现每一个线程都有自己的共享变量该如何解决呢?JDK中提供 ...
- gpg: symbol lookup error
今天使用sudo apt-get 安装包的时候,出现gpg错误,如下: gpg: symbol lookup error: /usr/local/lib/libreadline.so.6: undef ...
- iOS开发值NSUserDefaults类概述
NSUserDefaults类概述 NSUserDefaults类为和默认的系统进行交互提供了一个系统编程接口.默认的系统允许一个应用来定制它的行为以适应用户的喜好.例如,你可以允许用户去决定你的应用 ...
- 【Android】利用Fiddler进行抓包详解教程。抓取接口以及数据，可以抓真实安卓手机或者模拟器。
大家都知道抓包的方法很多.我这里给大家介绍介绍一种,利用fiddler进行抓包,当然比如Wireshark也可以抓包,我们这里不做介绍.我这里演示的是fiddler+天天模拟器,当然真实安卓手机也是一 ...
- Oracle之比较NVARCHAR2字符串
一.引言 昨天遇到一个问题,一直想不通是为什么,我在pl/sql里面执行sql语句,选出字段值等于某个值的的行: '; 用select * from test;是可以查到该值的,但是用这条语句却没有结 ...
- sublimtext3 自定义编译环境
sublime text是一个非常神奇到编辑器,对于我这种小白来说,感觉比vim好用,但是如果用sublime自带到编译环境到话,是没法向程序汇总输入数据的,所以要自己新建编译命令 { "c ...
- 启动storm之后浏览器访问报错,org.apache.thrift7.transport.TTransportException: java.net.ConnectException: Connection refused (Connection refused)
原因是zookeeper没有启动 Internal Server Error org.apache.thrift7.transport.TTransportException: java.net.Co ...
- [转]Spark能否取代Hadoop？
大数据的浪潮风靡全球的时候,Spark火了.在国外 Yahoo!.Twitter.Intel.Amazon.Cloudera 等公司率先应用并推广 Spark 技术,在国内阿里巴巴.百度.淘宝.腾讯. ...
- ctrl +ｚ
#bg 1 [1]+ /root/bin/rsync.sh & 用 jobs 命令查看正在运行的任务: #jobs [1]+ Running /root/bin/rsync.sh & ...
- 在同一台电脑上添加多个ssh key
1.创建新的ssh key: ssh-keygen -t rsa -C "your_email@email.com" 然后让你输入新的文件名称,这里设置为new # 设置名称为En ...