javascript 案例（二）表格操作（下）

有的时候我们需要对表格中的数据，或者样式进行操作，例如：

                          1.为了区分不同的数据，需要对表格每行数据的属性进行设置

                           2.对表格中的数据进行排序

1.行颜色进行动态显示，并设置鼠标事件，鼠标指向相应的行时，所对应的行进行高亮显示

<style type="text/css">
.one{
background-color:#9999FF;}
.two{
background-color:#33FF99;

}

.over{

background-color:#00FF00;
}
</style>
<pre name="code" class="javascript"><span style="color:#003300;">

//行颜色动态显示</span>

function change(){
var tabNode=document.getElementsByTagName("table")[0];<span style="color:#003300;">//获取table对象</span>
var trs=tabNode.rows;<span style="color:#003300;">//获得所有行</span>
var name;
for(var x=1;x<trs.length;x++){
if(x%2==1){
trs[x].className="one";

}else
trs[x].className="two";

trs[x].onmouseover=function (){
name=this.className;  <span style="color:#003300;">//记录原本属性值</span>
this.className="over";

}
trs[x].onmouseout=function(){
this.className=name;

}
}

}
<span style="font-size:18px;"></span><pre name="code" class="css"><pre name="code" class="javascript">window.onload=change;

html代码：

<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>2</td>
<td>广州</td>
</tr>
<tr>
<td>六六</td>
<td>28</td>
<td>吉林</td>
</tr>
<tr>
<td>赵七</td>
<td>22</td>
<td>南京</td>
</tr>
<tr>
<td>孙八</td>
<td>26</td>
<td>北京</td>
</tr>
</table>

2.对表格中的数据进行排序
表格中的数据按照年龄进行排序

思路：

1.每一个人的信息是一行，那么现将行数据都取出，临时存入到数组中。

2.并对数组按照每行中的第n个数据进行排序（假设年龄在第n行）。

3.将排序后的行对象重新添加回表格对象中。

代码：

function px(){

    var tabNode=document.getElementsByTagName("table")[0];<span style="color:#009900;">//获得table节点</span>

var trs=tabNode.rows;<span style="color:#33CC00;">//获得所有行</span>

var arr=new Array();<span style="color:#33CC00;">//创建数组容器,容器中存入的都是表格对象的引用</span>
for(var x=1;x<trs.length;x++){

arr[x-1]=trs[x];	<span style="color:#33CC00;">//将行对象存入数组容器中</span>

}

sortt(arr);<span style="color:#33CC00;">//排序</span>

<span style="color:#33CC00;">//将行对象输出到表格中</span>
var tbNode=tabNode.childNodes[0];<span style="color:#33CC00;">//获得tbody对象</span>

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

tbNode.appendChild(arr[x]);
}

}
<span style="color:#33CC00;"> //排序算法</span>
function sortt(arr){
for(var x=0;x<arr.length;x++){
for(var y=x+1;y<arr.length;y++){
<span style="color:#33CC00;"> //注意一定要变成整数</span>
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText)){

var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;

}

}

}

}