js之实现表格高亮显示

步骤:
第一步:确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
第二步:获取鼠标移上去的那行,对其设置背景颜色

js代码:

<script type="text/javascript">

                function changeColor(id,flag){
                    if(flag == "over"){
                        document.getElementById(id).style.backgroundColor = "red";
                    }else if(flag == 'out'){
                        document.getElementById(id).style.backgroundColor = "white";
                    }
                }

        script>

html代码:

<table border="1" width="500" height="50" align="center" cellspacing="0" id="tal">
            <thead>
                <tr>
                    <th>编号th>
                    <th>姓名th>
                    <th>年龄th>
                tr>
            thead>
            <tbody>
                <tr id="tr1" onmouseover="changeColor('tr1','over')" onmouseout="changeColor('tr1','out')">
                    <td>1td>
                    <td>张三td>
                    <td>23td>
                tr>
                <tr id="tr2" onmouseover="changeColor('tr2','over')" onmouseout="changeColor('tr2','out')">
                    <td>2td>
                    <td>李四td>
                    <td>24td>
                tr>
                <tr id="tr3" onmouseover="changeColor('tr3','over')" onmouseout="changeColor('tr3','out')">
                    <td>3td>
                    <td>王五td>
                    <td>25td>
                tr>
                <tr id="tr4" onmouseover="changeColor('tr4','over')" onmouseout="changeColor('tr4','out')">
                    <td>4td>
                    <td>赵六td>
                    <td>26td>
                tr>
                <tr id="tr5" onmouseover="changeColor('tr5','over')" onmouseout="changeColor('tr5','out')">
                    <td>5td>
                    <td>田七td>
                    <td>27td>
                tr>
            tbody>
        table>

你可能感兴趣的:(java,javascript,表格)