javascript table td row 的onmouseover 着色

最新推荐文章于 2021-06-19 05:20:43 发布

你猜猜看！

最新推荐文章于 2021-06-19 05:20:43 发布

阅读量826

点赞数

分类专栏： javascript 文章标签： table javascript button function border input

本文链接：https://blog.csdn.net/yangjun07167/article/details/5707370

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<html>
    <head>
        <script>
            var lastindex = -1;
            var lastcolor;
            var buttoncheck = 0;
            var lastcellindex = -1;
            var tab;
            function wholerow(eve){
                even = eve.srcElement?eve.srcElement:eve.target; /*因游览器有区别所以需要判断 */
                tab = document.getElementById("table01");         /*也可为方法加入this参数 tab=this */

                if(buttoncheck == 0){                      /*选取整行的情况 */
                    if (even.tagName == "TD"){                        /*所选中的可能不是td */
                        if(lastindex != -1){                          /*对上次选中的td清色 */
                            tab.rows[lastindex].bgColor = lastcolor;
                        }
                        nowRow=even.parentNode;                       /*选择td的父节点TR */
                        lastindex=nowRow.rowIndex;                    /*为清色做准备 */
                        lastcolor=nowRow.bgColor;                     /*同上 */
                        tab.rows[nowRow.rowIndex].bgColor="#C9C8FF"; /*为鼠标所在TR着色 */
                    }
                }else{                                   /*选取单元格的情况 */
                    if(even.tagName == "TD"){
                        if((lastindex != -1)&&(lastcellindex != -1)){     /*对上次选中的td清色 */
                            tab.rows[lastindex].cells[lastcellindex].bgColor = lastcolor;
                        }
                        lastcellindex = even.cellIndex;
                        nowRow=even.parentNode;
                        lastindex=nowRow.rowIndex;
                        lastcolor=nowRow.bgColor;

                        tab.rows[lastindex].cells[lastcellindex].bgColor = "#C9C8FF";
                    }
                }
            }
            function changefunction(){
                if(lastindex != -1){               /*button转换时清除color */
                    tab.rows[lastindex].bgColor = lastcolor;
                    tab.rows[lastindex].cells[lastcellindex].bgColor = lastcolor;
                }

                but_value = document.getElementById("but").value;

                if (but_value == "showonetd"){
                    document.getElementById("but").value = "showrow";   /*整行选取 */
                }else{
                    document.getElementById("but").value = "showonetd"; /*单元格选取 */
                }

                if (buttoncheck == 0){
                    buttoncheck = 1;   /*单元格选取 */
                }else{
                    buttoncheck = 0;   /*整行选取 */
                }
            }
        </script>
    </head>
    <body>
        <table border = '1' id = "table01" style = "width:30%" οnmοuseοver="wholerow(event);">
            <?php for ($i = 0;$i<10;$i++){?>
                <tr>
                    <td style = "width:30%;"><?php echo $i;?></td>
                    <td style = "width:40%;"><?php echo $i.$i.$i;?></td>
                    <td style = "width:30%;"><?php echo $i.$i.$i.$i.$i;?></td>
                </tr>
            <?php }?>
        </table>
        <input type = "button" id = "but" value = "showonetd" onclick = "changefunction();"></input>
    </body>
</html>

你猜猜看！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript table td row 的onmouseover 着色

<br /><html><br /> <head><br /> <script><br /> var lastindex = -1;<br /> var lastcolor;<br /> var buttoncheck = 0;<br /> var lastcellindex = -1;<br /> var tab;<br />
复制链接

扫一扫