我从今年 1 月开始编码，我想创建一个小游戏来训练我的一些新技能，我一开始就面临一个重要的问题。
我想创建一个表格，比如说 20 x 20。 知道此表中的许多图块都是独一无二的（具有独特的 CSS 功能），我需要能够单独操作每个图块的这些 CSS 属性。
我只想在 html 中创建一个<table>，这样我就可以轻松访问每个<tr> 和<td>。
我知道您可以使用 Javascript 以更简单直接的方式创建表格。问题是，在这个早期阶段，我无法想象如何操作特定图块的 CSS 属性。
关于如何解决这个问题的任何提示？
【问题讨论】：
标签： javascript html css html-table dom-events
实现此目的的纯 CSS 方法是使用 nth-child 来访问每个表的行和列。
举个例子，假设你想定位第 2 行和第 3 列，你可以这样做：
tr:nth-child(2) td:nth-child(3) {
color: red;
}<table>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>所以它的作用是在其中找到第二个表格行和第三个数据列。
【讨论】：
/*
utility function to create a new DOM element of type (`t`),
assign various attributes (`a`) and append as a child of `p`
*/
const create=function(t,a,p){
let el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );
let _arr=['innerHTML','innerText','html','text'];
for( let x in a ) if( a.hasOwnProperty( x ) && !~_arr.indexOf( x ) ) el.setAttribute( x, a[ x ] );
if( a.hasOwnProperty('innerHTML') || a.hasOwnProperty('html') ) el.innerHTML=a.innerHTML || a.html;
if( a.hasOwnProperty('innerText') || a.hasOwnProperty('text') ) el.innerText=a.innerText || a.text;
if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );
return el;
};
/*
shorthand utility to find a cell by querying
the data attributes for row and column
*/
const getcell=function(r,c){
return document.querySelector('td[ data-row="'+r+'" ][ data-col="'+r+'" ]');
};
let gs=10; // grid size
let o={}; // empty options
let tbl=create('table',o,document.getElementById('grid-container'));
// manipulate the CSS variable which helps govener grid display
let root=document.documentElement;
root.style.setProperty( '--size', gs );
// construct rows and columns
for( let a=1; a <= gs; a++ ){
let row=create('tr',o,tbl);
for( let b=1; b <= gs; b++ ){
create('td',{'data-row':a,'data-col':b},row);
}
}
// manipulating individual cells
getcell(3,3).style.background='lime';
getcell(5,5).classList.add('banana');:root{--size:10;}
table{ width:100%; }
td{width:calc( calc( 100% / var( --size ) ) - 4px );height:calc( calc( 100vh / var( --size ) ) - 4px );border:1px solid red;margin:2px; }
.banana{background:yellow}<div id='grid-container'></div>诚然，这里的显示描绘了非方形的单元格 - 它很快就拼凑在一起，但我希望它展示了如何为单元格操作 css。
【讨论】：
html 表格可以满足您的要求，但我更愿意使用 CSS Grid，因为它是表格功能的一个非常强大的演变。它将简化您的布局操作，并且肯定会在未来学习它。正如我们所知，在互联网开始时，html 表格用作整个网站的布局。甚至为了将可视化调整为像素，让嵌套表进入无法命名的级别甚至是很常见的。现在，这一切都过去了，首先是 flex 布局，现在是 CSS 网格，所有主流浏览器都很好地支持它。
我建议您查看一些 CSS 网格资源并尝试使用它。一些好的是：
https://css-tricks.com/snippets/css/complete-guide-grid/
如果您需要访问每个单独的单元格，有很多方法：
您可以为每个单独的单元格添加一个 id 来指示其位置：
<div id="r15c8"></div>
<div id="r16c8"></div>
或 Excel 样式：
<div id="E14"></div>
<div id="E15"></div>
然后……
您可以使用 CSS 的 :nth-child() 选择器
或者您可以使用 CSS 网格功能为每个单元格分配名称，甚至使用区域功能为一组单元格分配名称。
body {
padding: 20px;
}
.board {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 2px;
}
.board > div {
text-align: center;
background-color: #20262e;
color: #fff;
padding: 20px;
font-size: 14px;
}
.board > div:nth-child(7) {
background-color: red;
}<div class="board">
<div>A1</div>
<div>B1</div>
<div>C1</div>
<div>D1</div>
<div>A2</div>
<div>B2</div>
<div>C2</div>
<div>D2</div>
<div>A3</div>
<div>B3</div>
<div>C3</div>
<div>D3</div>
<div>A4</div>
<div>B4</div>
<div>C4</div>
<div>D4</div>
</div>【讨论】：
您可以为每个网格分配唯一的类名，或者如果您觉得要手动执行很多网格，则可以使用 javascript 生成它们并分配一个唯一的类
类名可以如下：
grid00 grid01 grid02
grid10 grid11 grid12
grid20 grid21 grid22
现在您只需使用网格索引即可访问
【讨论】：