文档章节

js实现鼠标hover格子时,同时高亮它的行和列(本题可使用table结构,不限于9格)

小平民
 小平民
发布于 2015/10/23 09:27
字数 689
阅读 544
收藏 3

之前参加了B公司的面试,之前他给了笔试题,摘两题。先放一个小题目

1.<p name=”A”>a</p>

<p name=”A”>c</p>

<p name=”B”></p>

<p name=”A”>b</p>

<p name=”A”>b</p>

请写一段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。


2.下面是第二题,先放题目

 js实现鼠标hover格子时,同时高亮它的行和列(本题可使用table结构,不限于9)。

不会插图。。。

  1. 先放上HTML和CSS

  2. <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>

重点来了

先用原生JS写了一个

<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>

再用jQuery写了一个

<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")所指相对的一直是第一行,并不能像原来想象的指向全部行,所以要加循环使其遍历所有的行。

总体来说这是比较直接的思路和方法,先记着。

© 著作权归作者所有

下一篇: 各类链接
小平民
粉丝 2
博文 34
码字总数 11775
作品 0
杭州
前端工程师
私信 提问
iview table表格的自定义样式

iview table表格的自定义样式 1.需求 背景颜色为深色背景 左侧可勾选checkbox 选中鼠标hover浮动到某行,当前行背景颜色更换为红色 斑马条纹 效果图 2.设计 iview的官方文档已经给出了解决方...

玩大神的OSChina
2018/10/17
4.5K
0
一个好的IDE应该是什么样子的。。。

欢迎补充说明 1、html/javascript/css/php/xml/json/tpl/C++/C# 代码格式化,支持整个项目格式化 2、代码追踪,按住ctrl+鼠标左键,跟踪类,函数,变量 3、单步,断点调试 4、文本查找,替换...

小k宝贝
2014/11/19
2.5K
29
【原创】css3+jquery 实现横线跟随菜单-含详细优化过程和思考

前提:一直想自己写一个如下图的效果,虽然网上也有,但是考虑到不受将来设计图的多样性,自己写一个拓展性和维护性更佳。 版本01的实现过程 只是效果实现; 优化欠佳 html如下: css如下:(...

柴高八斗之父
2017/09/11
35
0
锦上添花DataGrid!

作者: cuike519的专栏 http://blog.csdn.net/cuike519/ 我们知道如果datagrid的宽度比较长那么使得我们很难分清楚行数据,也就是很容易 使我们看错行,我想如果当我们的鼠标移动到datagrid的...

晨曦之光
2012/03/09
66
0
前端开发css实战:使用css制作网页中的多级菜单

前端开发css实战:使用css制作网页中的多级菜单   在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航、二维码显示隐藏、文本提示等等......而这些效果都是可以使用纯css实现的(...

grootzhang
2016/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新建时隐藏按钮,显示明细时显示

在InitControl()中 if (saTableKeys != null) { rpgDesign.Visible = true; rpgPrint.Visible = true; }......

_Somuns
34分钟前
5
0
【实战演练,拒绝996】-SpringBoot2.x自定义Spring boot Starter

欢迎关注 提升能力,涨薪可待 面试知识,工作可待 实战演练,拒绝996 如果此文对你有帮助、喜欢的话,那就点个赞呗! 前言 是不是感觉在工作上难于晋升了呢? 是不是感觉找工作面试是那么难呢...

ccww_
35分钟前
10
0
SpringBoot从入门到放弃,原理篇-自动配置原理

SpringBoot从入门到放弃,原理篇-自动配置原理 springboot自动配置原理 配置文件能配置的属性参照 自动配置原理 1、springboot启动的时候加载主配置类,开启了自动配置功能@EnableAutoConfig...

有一个小阿飞
今天
11
0
php变量和数据类型

php中的变量 PHP中的变量声明 PHP中的变量的使用 PHP中的数据类型之整型 PHP数据类型之浮点类型和布尔类型 PHP数据类型之字符串类型 PHP数据类型之heredoc和nowdoc的使用 PHP数据类型之复合类...

达达前端小酒馆
今天
7
0
OSChina 周日乱弹 —— 沙发忽然就爆炸了,吓死我了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】@这次装个文艺青年吧:#今日歌曲推荐# 分享Vicetone/Youngblood Hawke的单曲《Landslide》: 《Landslide》- Vicetone/Youngblood Hawke 手机党...

小小编辑
今天
253
9

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部