DOM第五讲

表格在页面中的一些体现

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

<table>

<tr>

<th>姓名</th>

<th>年龄</th>

<th>地址</th>

</tr>

<tr>

<td>张三</td>

<td>27</td>

<td>上海</td>

</tr>

<tr>

<td>张三</td>

<td>27</td>

<td>上海</td>

</tr>

<tr>

<td>张三</td>

<td>27</td>

<td>上海</td>

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

}

 

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

<script type=”text/javascript”>

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;

}

 

<style type=”text/css”>

.one{

background-color:#e1e16a;

}

.two{

background-color:#75f094;

}

.over{

background-color:#8deffa;

}

</style>

 

三、表格排序

 

<th><a href=”javascript:void(0)” onclick=”sortTable()”>年龄</a></th>

为<a>标签设定属性

<style type=”text/css”>

th a:link,th a:visited{

color:#279bda;

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

}

</style>

 

<script type=”text/javascript”>

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>

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

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

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

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

 

<input type=”button” value=”总金额” onclick=”getSum()”>

<span id=”sumid” />

 

<script type=”text/javascript”>

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;

}

 

}