js實現鼠標hover格子時，同時高亮它的行和列(本題可以使用table結構，不限於9格)

時間 2019-11-13

標籤實現鼠標 hover 格子同時本題可以使用 table 結構限於欄目 JavaScript 简体版

原文原文鏈接

以前參加了B公司的面試，以前他給了筆試題，摘兩題。先放一個小題目javascript

1.acss

chtml

java

bjquery

b面試

請寫一段JS，得到name =」A」的內容組成數組, 經過排序、去重，而後複製一遍，打印以下結果：["a","b","c","a","b","c"] 數組

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p name="A">a</p>
<p name="A">c</p>
<p name="B"></p>
<p name="A">b</p>
<p name="A">b</p>
</body>
<script>
    var ps=document.getElementsByTagName("p");
    var arr=new Array();
    var count=0;
    for(var i=0;i<ps.length;i++){
        if(ps[i].getAttribute("name")=="A"){
            count++;
            arr[count]=ps[i].innerHTML;
        }
    }
    arr.sort();//排序
    for(var j=0;j<arr.length;j++){
        if(arr[j]==arr[j++]){
            arr.splice(j,1);
            j++;
        }
    }//去重
    var arr2;
    arr2 = arr.slice(0);
    var array=arr.concat(arr2);//複製
    alert(array);
</script>
</html>

疑惑比較久的是除了表單元素，通常是不用document.getElementsByname的，因此獲取name屬性的屬性值要向其餘方法。好比getAttribute。this

2.下面是第二題，先放題目spa

js實現鼠標hover格子時，同時高亮它的行和列(本題可以使用table結構，不限於9格)。code

不會插圖。。。

先放上HTML和CSS

<style>
        body,table,tr,td{margin: 0;padding:0;}
        #table{width:200px;margin: 0 auto;}
        td{width: 50px;height: 50px;background: #ccc;text-align: center;}
        td.over{background: #f00;}
    </style>

而後是HTML

<div id="table">
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</div>

重點來了

先用原生ＪＳ寫了一個

<script>
    var tableObj=document.getElementById("table");
    var table=document.getElementsByTagName("table")[0];
    var tr=table.getElementsByTagName("tr");
    var td=table.getElementsByTagName("td");
    for(var i=0; i<td.length; i++) {
        td[i].onmouseleave = function() {
            for (var j=0;j< td.length; j++)
                td[j].className='';//去除原來影響
        };
        td[i].onmouseenter=function() {
            this.className='over';
            var row=this.parentNode.getElementsByTagName('td');
            for(var j=0;j<row.length;j++)
                {
                    row[j].className='over';
                }//行
            var column=this.cellIndex;
            for(var k=0;k<tr.length;k++)
                {
                tr[k].getElementsByTagName("td")[column].className='over';
                }//列
        }
    }
</script>

再用ｊＱｕｅｒｙ寫了一個

<script type="text/javascript" src="jquery.1.10.0.min.js"></script>
<script>
    $("td").mouseleave(function () {
        $("td").removeClass("over");
    });//去除影響
    $("td").mouseenter(function () {
        $(this).addClass("over");
        $(this).siblings().addClass("over");//行
        var column=$(this).prevAll().length;
        for(var i=0;i<$("tr").length;i++)
        {
            $("tr").eq(i).find("td").eq(column).addClass("over");//列
        }
    });
</script>

從jQuery寫的代碼列中截取出這麼一段

var column=$(this).prevAll().length;
        for(var i=0;i<$("tr").length;i++)
        {
            $("tr").eq(i).find("td").eq(column).addClass("over");//列
        }

這段是寫的最辛苦的，首先column獲得的鼠標所在格子所屬的列，這是對的。

但下面$("tr")所指相對的一直是第一行，並不能像原來想象的指向所有行，因此要加循環使其遍歷全部的行。

整體來講這是比較直接的思路和方法，先記着。