Шахматная доска
Создать функцию, генерирующую шахматную доску. При этом можно использовать любые html-теги по своему желанию. Доска должна быть разлинована соответствующим образом, т.е. чередовать черные и белые ячейки. Строки должны нумероваться числами от 1 до 8, столбцы – латинскими буквами A, B, C, D, E, F, G, H.
by Артур Бакаев
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
CSS
table{
border-collapse:collapse;
}
td{
width: 40px;
height: 40px;
border:1px solid black;
}
tr td{
background-color: #fff;
}
tr td:nth-child(2n){
background-color: #000;
}
tr:nth-child(2n) td{
background-color: #000;
}
tr:nth-child(2n) td:nth-child(2n){
background-color: #fff;
}
.head{
background-color: #fff !important;
text-align:center;
line-height:40px;
border:none;
}
JavaScript
table = document.createElement('table');
cols = ['A','B','C','D','E','F','G','H'];
rows = ['1','2','3','4','5','6','7','8'];
body = document.querySelector('body');
body.appendChild(table);
for (a=0;a<10;a++){
table.appendChild(document.createElement('tr'));
for(b=0;b<10;b++){
document.querySelectorAll('tr')[a].appendChild(document.createElement('td'));
}
}
for (a=1;a<=10;a++){
for(b=0;b<10;b++){
col = document.querySelectorAll('tr:nth-child('+a+')>td')[b];
console.log(col);
if(a===1 || a===10){
col.classList.add('head');
if(b>0 && b<9) col.innerHTML = cols[b-1];
}
if(b===0 || b===9){
col.classList.add('head');
if(a>1 && a<10) col.innerHTML = rows[a-2];
}
}
}