HTML布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方格坐标</title>
<link rel="stylesheet" href="../css/方格坐标.css">
<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/方格坐标.js"></script>
</head>
<body>
<table id="tab#">
<tr>
<td>
<div class="divs">
<input type="text"/>
<span>A1</span>
</div>
</td>
<!-- 5*5的矩阵 -->
<td>
<div class="divs">
<input type="text"/>
<span>E5</span>
</div>
</td>
</tr>
</table>
<div id="labdiv">
<label>
</label>
</div>
</body>
</html>
CSS样式表：
td{
border-style: none;
background-color: white;
text-align: center;
font-family: "Microsoft YaHei UI", serif;
}
input{
width: 30px;
height: 20px;
border: 1px solid silver;
color: black;
display: none;
}
.divs{
padding: 20px 20px;
border-style: none;
background-color: white;
text-align: center;
font-family: "Microsoft YaHei UI", serif;
}
div#labdiv{
width: 314px;
height: 20px;
border: 1px solid silver;
text-align: center;
}
$(document).ready(function () {
$("td>div").mouseover(function () {
//获得焦点
var row = $(this).parent().prevAll().length;
var cal = $(this).parent().parent().prevAll().length;
$("table~div").children("label")[0].innerText = (row + 1) + "x" + (cal + 1) + " " + $(this).children("span")[0].innerText;
$("tr:eq(" + cal + ")>td>div").css("background-color", "silver");
$("tr td:nth-child("+(row+1)+")>div").css("background-color", "silver");
// $.each([0,1,2,3,4], function (i) {//可以使用遍历的方式逐个添加 也可以直接调用上面的选择器
//
// $("tr:eq("+i+")>td>div:eq("+row+")").css("background-color", "silver");
// });
$(this).css("background-color", "red");
});
$("td>div").mouseout(function () {
//失去焦点
var row = $(this).parent().prevAll().length;
var cal = $(this).parent().parent().prevAll().length;
$(this).css("background-color", "white");
$("tr:eq(" + cal + ")>td>div").css("background-color", "white");
$("tr td:nth-child("+(row+1)+")>div").css("background-color", "white");
});
$("td>div").dblclick(function () {
$(this).children("input").val($(this).children("span")[0].innerText);
$(this).children("span")[0].innerText = "";
$(this).children("input").css("display", "block");
});
$("td>div").children("input").blur(function () {
$(this).css("display", "none");
$(this).next("span")[0].innerText = $(this).val();
});
});