黑马程序员-DOM（第五讲）

最新推荐文章于 2025-12-16 21:51:40 发布

原创最新推荐文章于 2025-12-16 21:51:40 发布 · 803 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #DOM

本文详细介绍了如何在网页中实现表格的样式设置、行颜色间隔显示与高亮效果、鼠标悬停时的高亮反应，以及表格数据的排序功能，并通过JavaScript与CSS结合展示了全选商品列表和总金额计算的实现。

表格在页面中的一些体现

实现效果：行颜色间隔显示并高亮

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

写一个样式表，为表格，行，添加样式

table.css

table{

border:#249bdb 1px solid;

width:500px;

border-collapse:collapse;

}

table td{

border:#249bdb 1px solid;

paddding:10px;

}

table th{

border:#249bdb 1px solid;

paddding:10px;

background-color:rgb(200,200,200);

}

定义两个类选择器，使得相邻两行的背景不同，以示区分

function trColor(){

//思路：

因为要操作行的样式，所以要先获取表格对象，

然后获取所有被操作的行对象

遍历行并给每一行指定样式

var oTabNode=docummnet.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”;

}

onload=function(0

{

trColor();

};

</script>

这样做完之后，怎么样实现高亮效果呢？就是当鼠标移到每一行上时，发亮，移出时，恢复原状

这就需要为没一行对象添加两个事件

在上面的for语句中

collTrNodes[x].onmouseover=function(){

name=this.className;//记录下每行的原状态，以便恢复

this.className=”over”;

}

collTrNodes[x].onmuseout=function(){

this.className=name;

}

.one{

background-color:#e1e16a;

}

.two{

background-color:#75f094;

}

.over{

background-color:#8deffa;

}

</style>

三、表格排序

为<a>标签设定属性

th a:link,th a:visited{

color:#279bda;

text-decoration:none;//去掉超链接的下划线

}

</style>

function sortTable()

{

//思路：

1、排序就需要数组，获取需要参与排序的行对象数组

2、对行数组中的每一个行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换

3、将排好序的数组重新添加回表格

//首先得到table节点(table的id为info)

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);

//将排完序的行对象添加进表格

for(var x=0;x<trArr.length;x++)

{

trArr[x].parentNode.appendChild(trArr[x]);

}

function mySort(arr)

{

for(var x=0;x<arr.length;x++)

{

for(var y=x+1;y<ar.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>

四、全选商品列表

<input type=”checkbox” name=”item” value=”4000”/>笔记本电脑,3000元</br>

function getSum()

{

//获取所有名称为item的复选框，判断checked状态，为true表示被选中，获取该节点的value进行累计

var sum=0;

var collItemNodes=document.getElementsByName(“item”);

for(var x=0;x<collItemNodes.length;x++)

{

if(collItemNodes[x]checked)

{

sum+=parseInt(collItemNodes[x].value);

}

documet.getElementById(“sumid”).innerHTML=sum;

}

</script>

弄个全选

<input type=”checkbox” name=”allitem” onclick=”checkAll(this)”/>全选

function checkAll(node)

{

//原理，将allitem的状态赋值给所有的item的状态

var collItemNodes=document.getElementsByName(“item”);

For(var x=0;x<collItemNodes.length;x++)

{

collItemNodes[x].checked=node.checked;

}