console
function bind() {
var layout = document.getElementById('jsLayout');
var tdNodeList = layout.getElementsByTagName('td');
var length = tdNodeList.length;
var curNode = event.target;
if(curNode.tagName === 'TD') {
for(var i = 0; i < length; i++) {
tdNodeList[i].className = '';
}
curNode.id = 'dh';
var tagName = curNode.tagName;
var parentNode = curNode.parentElement;
let childrenNode = parentNode.getElementsByTagName(tagName);
var length = childrenNode.length;
var num = 0;
for(let i = 0; i < length; i++) {
if(childrenNode[i].id === 'dh') {
num = i;
childrenNode[i].id = ''
}
}
console.log("targetNum", num, layout);
curNode.className='current';
if(curNode.previousSibling) {
var leftNode = curNode.previousSibling;
leftNode.className='wrap';
}
if(curNode.nextSibling) {
var rightNode = curNode.nextSibling;
rightNode.className='wrap';
}
if(parentNode.previousElementSibling) {
var topNode = selectNode(parentNode.previousElementSibling, num);
topNode.className='wrap';
if(topNode.previousElementSibling) topNode.previousElementSibling.className='wrap';
if(topNode.nextElementSibling) topNode.nextElementSibling.className='wrap';
}
if(parentNode.nextElementSibling) {
var bottomNode = selectNode(parentNode.nextElementSibling, num);
bottomNode.className='wrap';
if(bottomNode.previousElementSibling) bottomNode.previousElementSibling.className='wrap';
if(bottomNode.nextElementSibling) bottomNode.nextElementSibling.className='wrap';
}
}
}
function selectNode(parentNode, num) {
var targetNode = parentNode.firstChild;
for(j = 0; j < num; j++ ){
if(targetNode.nextSibling) {
targetNode = targetNode.nextSibling;
}
}
return targetNode;
}
<table id="jsLayout" onclick="bind()">
<tbody>
<tr><td class="current"></td><td class="wrap"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td class="wrap"></td><td class="wrap"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
body, html {
margin: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
margin: 10px auto;
}
td {
border: 1px solid #E1E1E1;
padding: 0;
width: 30px;
height: 30px;
cursor: pointer;
}
.current {
background: #1D2088;
}
.wrap {
background: #00A0E9;
}