js实现鼠标hover格子时，同时高亮它的行和列(本题可使用table结构，不限于9格)
之前参加了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格)。
不会插图。。。
先放上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")所指相对的一直是第一行，并不能像原来想象的指向全部行，所以要加循环使其遍历所有的行。
总体来说这是比较直接的思路和方法，先记着。