<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head><body>
<div class="box"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 300px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 400px auto;
}
.box p {
width: 20px;
height: 20px;
box-sizing: border-box;
border: 1px solid rgb(243, 243, 243);
font-size: 12px;
background-color: #ffffff;
display: flex;
justify-content: space-around;
align-items: center;
}
.tree{
background-color: rgb(232, 247, 217) !important;
}
</style>
<script type="text/javascript">
var box = document.querySelector('.box');
var arr = new Array();
var keys = [];
var row = 10;
var col = 10;
// 生成表格并填充数组
box.style.width = row * 20 + 'px';
box.style.height = col * 20 + 'px';
for (let i = 0; i < row; i++) {
for (let j = 0; j < col; j++) {
box.innerHTML += `<p></p>`;
}
}
var pList = document.querySelectorAll('p');
for (let i = 0; i < pList.length; i++) {
if (i % col == 0) {
arr.push(new Array());
}
pList[i].count = 0;
arr[parseInt(i / col)].push(pList[i]);
}
console.log(arr)var pelL = 1;
var pelT = 1;
arr[pelT][pelL].classList = 'pel';
var pel = document.querySelector('.pel');
pel.innerHTML = '原创文章，作者：dweifng，如若转载，请注明出处：https://blog.ytso.com/274555.html