javaseday37(新闻列表参数名不能和关键字相同表单排序间隔行颜色高亮添加事件)

<style type="text/css">
/*
    超链接访问前后样式一样
*/
a:link,a:visited{
    color:#00F;
    text-decoration:none;
}
a:hover{
    color:#FBB;
}
#newstext{
    border:#000 1px solid;
    width:400px;
    padding:10px;
}
/*预定义一些样式封装到选择器中 一般使用类选择器*/ 
.normal{
    font-size:16px;
    color:#099;
    background-color:#13C0EC;   
}
.max{
    color:#303;
    font-size:24px;
}
.min{
    color:#333;
    font-size:9px;
}
</style>
</head>

<body>
<!--
新闻字体的大中小样式改变
思路
1 先有新闻数据 并用标签封装数据
2 定义一些页面样式
3 确定事件源和事件 以及处理方式中被处理的节点
    事件源是a标签 事件是onclick
    被处理的节点是div-newstext
    既然要给超链接加入自定义的事件处理 就要先取消超链接的默认点击效果
    可以使用给href设置javascript:void(0) 来完成
 -->
 <script type="text/javascript">
    //定义改变字体的方法
    function changeFont(class1)//不能用class 与关键字冲突不能使用了
    {
        /*
            既然要对div newstext中的文本字体进行操作
            必须要先获取div节点对象
        */  
        var oNewsText = document.getElementById("newstext");
        //alert(class1);
        //获取oNewsText节点的style样式属性对象
        //oNewsText.style.fontSize=size+"px";//加载样式要关注 优先级 可能低级的不能加载
        //oNewsText.style.color = clr;//颜色需要#       
        oNewsText.className = class1;
    }
    /*
        如果根据用户点击所需要的效果不唯一
        仅通过传递多个参数虽然可以实现效果 但是 1、传参过多 阅读性差 2、js代码和css代码耦合性高
        3、不利于扩展
        解决
        将多个所需的样式进行封装
        封装到 选择器中 只要给指定的标签加载不同的选择器就可以了 
    */
        function changeFont2(class1)//不能用class 与关键字冲突不能使用了
    {
        var oNewsText = document.getElementById("newstext");
        oNewsText.className = class1;
    }   

 </script>
 <h1>新闻标题</h1>
 <hr />
 <a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('normal')">中字体</a> 
 <a href="javascript:void(0)" onclick="changeFont('min')">小字体</a>
 <div id="newstext" >
   这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
 </div>
</body>

<script type="text/javascript">
window.onload = function trColor()
{
    /*
        1、因为要操作行的样式 所以要先获取表格对象
        2、获取所有被操作的行对象
        3、遍历行并给每一行指定样式
    */
    tabNode = document.getElementById("tableid");
    //表格中所有的行

    var collTrNode = tabNode.rows;
    //遍历的时候从第二行开始遍历
    for(var x= 1; x<collTrNode.length;x++)
    {
        if(x%2==1)
        {
            collTrNode[x].className="one";  
        }   
        else
        {
            collTrNode[x].className="two";  
        }
        //给每一个行对象都添加两个事件
        collTrNode[x].onmouseover=function()
        {
            name = this.className;
            this.className = "over";
        }
        collTrNode[x].onmouseout=function()
        {
            this.className = name;
        }
    }
    //if();
}
var name;
/*function over(node)
{
    name = node.className;
    node.className="over";

}
function out(node)
{
    node.className=name;    
}
*/
</script>
<script type="text/javascript">
    function sorttab()
    {
        /*
            1、排序需要数组 获取需要参与排序的行对象数组
            2、对行数组中的每一行的年龄单元格的数据进行比较 并完成行对象在数组中的位置置换
            3、将排好序的数组重新添加回表格
            最小的放在最下面 从下面添加上来 
        */  
        var oTabNode = document.getElementById("tableid");
        var collTrNode = oTabNode.rows;

        //定义一个临时容器 存储需要排序行对象
        var trArr = [];
        //
        //遍历原行集合 并将需要排序的行对象存储到临时容器中
        for(var x=1 ; x<collTrNode.length;x++)
        {   

            trArr[x-1] = collTrNode[x];
        }
        //对临时容器排序

        mySort(trArr);
        //alert(trArr[1].innerHTML);
        //将排完序的行对象添加回表格
        if(flag)
        {
            for(var x=0;x<trArr.length;x++)
            {
                //oTabNode.childNodes[0].appendChild(trArr[x]);//不实用
                trArr[x].parentNode.appendChild(trArr[x]);
            }
            flag = false;
        }
        else
        {
            for(var x=trArr.length-1;x>=0;x--)
            {
                //oTabNode.childNodes[0].appendChild(trArr[x]);//不实用
                trArr[x].parentNode.appendChild(trArr[x]);
            }
            flag = true;
        }
    }
    var 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>

</head>

<body>
<table id="tableid">
    <tr>
        <th>姓名</th>
        <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
        <th>地址</th>
    </tr>
    <tr onmouseover="over(this)" onmouseout="out(this)">
        <td>张苏纳</td>
        <td>11</td>
        <td>天堂</td>
    </tr>
    <tr>
        <td>小白</td>
        <td>14</td>
        <td>上号</td>
    </tr>
    <tr>
        <td>如果</td>
        <td>8</td>
        <td>玩玩</td>
    </tr>
    <tr>
        <td>是</td>
        <td>18</td>
        <td>大岸</td>
    </tr>
</table>
</body>