用js使表格高亮显示

用js使表格高亮显示
一、步骤分析
第一步:确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
第二步:获取鼠标移上去的那行,对其设置背景颜色
二、代码:


<html>
<head>
    <meta charset="utf-8">
    <title>用js使表格高亮显示title>
    <link rel="stylesheet" href="">
    <script type="text/javascript">
       function onmouse(a,b){
            if(b=="over"){
                document.getElementById(a).style.backgroundColor="red";
            }
            if(b=='out'){
                document.getElementById(a).style.backgroundColor="";
            }

        }

script>
head>
<body>
    <table border="1" width="500" height="50" align="center">
            <thead>
                <tr>
                    <th>编号th>
                    <th>姓名th>
                    <th>年龄th>
                tr>
            thead>
            <tbody>
                <tr onmouseover="onmouse('tr0','over')" id="tr0" onmouseout="onmouse('tr0','out')">
                    <td>1td>
                    <td>张三td>
                    <td>22td>
                tr>
                <tr onmouseover="onmouse('tr1','over')" id="tr1" onmouseout="onmouse('tr1','out')">
                    <td>2td>
                    <td>李四td>
                    <td>25td>
                tr>
                <tr onmouseover="onmouse('tr2','over')" id="tr2" onmouseout="onmouse('tr2','out')">
                    <td>3td>
                    <td>王五td>
                    <td>27td>
                tr>
                <tr onmouseover="onmouse('tr3','over')" id="tr3" onmouseout="onmouse('tr3','out')">
                    <td>4td>
                    <td>赵六td>
                    <td>29td>
                tr>
                <tr onmouseover="onmouse('tr4','over')" id="tr4" onmouseout="onmouse('tr4','out')">
                    <td>5td>
                    <td>田七td>
                    <td>30td>
                tr>
                <tr onmouseover="onmouse('tr5','over')" id="tr5" onmouseout="onmouse('tr5','out')">
                    <td>6td>
                    <td>汾九td>
                    <td>20td>
                tr>
            tbody>
        table>
body>
html>

三、结果
开始显示的界面:
用js使表格高亮显示_第1张图片
鼠标移入张三哪行的界面:
用js使表格高亮显示_第2张图片
鼠标移出张三哪行的界面
用js使表格高亮显示_第3张图片

你可能感兴趣的:(用js使表格高亮显示)