JS实现表格高亮显示

前言:本文内容为表格高亮显示功能,分为两种,第一种各行换色。第二种鼠标移动到对应行,高亮显示


各行换色


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
       <script>
         window.onload=function(){
            var tabs= document.getElementById("tabl");
            var len= tabs.tBodies[0].rows.length;
            for (var i=0;iif(i%2==0){
                tabs.tBodies[0].rows[i].style.backgroundColor="yellow";
                }
            }
         }
       script>
    head>
    <body>
        <table id="tabl" border="1px" width="500px" height="60px" cellpadding="1px" align="center" id="tabl">
            <thead>
            <tr align="center">
                <th>
                    <font size="3">编号font>
                th>
                <th>
                    <font size="3">姓名font>
                th>
                <th>
                    <font size="3">年龄font>
                th>
            tr>
            thead>
            <tbody>
            <tr>
                <td>
                    01
                td>
                <td>
                    张三
                td>
                <td>
                    员工
                td>
            tr>
            <tr>
                <td>
                    02
                td>
                <td>
                王五  
                td>
                <td>
                    员工
                td>
            tr>           
            <tr>
                <td>
                    03
                td>
                <td>
                    李小二
                td>
                    <td>
                    电影
                td>
            tr>           
            <tr>
                <td>
                    04
                td>
                <td>
                王麻子 
                td>
                <td>
                视频  
                td>
            tr>           
            <tr>
                <td>
                    06
                td>
                <td>
                    二狗子
                td>
                    <td>
                    狗屎
                td>
            tr>           
            <tr>
                <td>
                    07
                td>
                <td>
                小儿  
                td>
                <td>
                老板  
                td>
            tr>
            tbody>
        table>
    body>
html>

鼠标移动高亮显示


<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行换色title>
        <script>
        //基础模型
/*        function mouseover(){
            document.getElementById("tab1").style.backgroundColor="red";
        }
        function mouseout(){
            document.getElementById("tab1").style.backgroundColor="white";
        }*/
        function changeColor(id,flag)
        {
            if(flag=="over")
            {
                document.getElementById(id).style.backgroundColor="yellow";
            }
            else{
                document.getElementById(id).style.backgroundColor="white";
            }
        }
        script>
    head>
    <body>
        <table border="1" width="500" height="50" align="center" >
            <tr >
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
            tr>
            <tr onmouseover="mouseover()" onmouseout="mouseout()" id="tab1">
                <td>1td>
                <td>张三td>
                <td>22td>
            tr>
            <tr onmouseover="changeColor('tab2','over')" onmouseout="changeColor('tab2','out')" id="tab2">
                <td>2td>
                <td>李四td>
                <td>25td>
            tr >
            <tr  onmouseover="changeColor('tab3','over')" onmouseout="changeColor('tab3','out')" id="tab3">
                <td>3td>
                <td>王五td>
                <td>27td>
            tr>
            <tr  onmouseover="changeColor('tab4','over')" onmouseout="changeColor('tab4','out')" id="tab4">
                <td>4td>
                <td>赵六td>
                <td>29td>
            tr>
            <tr  onmouseover="changeColor('tab5','over')" onmouseout="changeColor('tab5','out')" id="tab5">
                <td>5td>
                <td>田七td>
                <td>30td>
            tr>
            <tr  onmouseover="changeColor('tab6','over')" onmouseout="changeColor('tab6','out')" id="tab6">
                <td>6td>
                <td>汾九td>
                <td>20td>
            tr>
        table>
    body>
html>

————————————————————上文出自胖胖,转载请附带原文链接
若有错误,请在下方评论,作者会及时更改!!!

后续更新自学的方法,以及java知识总结
我是哪怕前路坎坷,也不愿负年轻的菜狗,自学之路,共勉

你可能感兴趣的:(js,javaScript,java自学,java,javaScript,js)