как сделать так, чтобы был шахматный порядок
Я хочу сделать это через js, но каждый раз, когда я его использую
let element = document.getElementById("name");
element.style.backgroundColor = color_second;
затем она зациклилась на первой ячейке, но как обновить чтобы было через ячейку не понимаю, чтобы при каждом заходе в else цвет менялся на нужную ячейку, давно бы использовал html, но дали задание через js, не имея опыта работы с JS, но погуглил и не нашла ее
function A_Table_In_A_Cell(str, col, color_first, color_second) {
document.write("<table width='100' height='100'>");
for (let i = 1; i <= str; i++) {
document.write("<tr>");
for (let j = 1; j <= col; j++) {
if (i % 2 == j % 2) {
document.write("<td bgcolor='#AAAAFF'></td>");
} else {
document.write('<td id = "name"></td>');
let element = document.getElementById("name");
element.style.backgroundColor = color_second;
}
}
document.write("</tr>");
}
document.write("</table>");
}<body onload="A_Table_In_A_Cell(5,5,'#AAAAFF','#FFAAAA')">Ответы (3 шт):
Автор решения: Rudi
→ Ссылка
Можно сделать так
function A_Table_In_A_Cell(trAmount, tdAmount, color_first, color_second) {
document.write("<table width='100' height='100'>");
for (let i = 1; i <= trAmount; i++) {
document.write("<tr>");
for (let j = 1; j <= tdAmount; j++) {
if (i % 2 == j % 2) {
document.write('<td bgcolor='+ color_first +'></td>');
} else {
document.write('<td id = "name" bgcolor='+ color_second +'></td>');
}
}
document.write("</tr>");
}
document.write("</table>");
}<body onload="A_Table_In_A_Cell(5,5,'#AAAAFF','#FFAAAA')">
Автор решения: DiD
→ Ссылка
JS так JS.
let table = document.createElement('table');
document.body.appendChild(table);
for (let j = 0; j < 8; j++) {
const tr = document.createElement('tr');
for (let i = 0; i < 8; i++)
tr.appendChild(document.createElement('td'));
table.appendChild(tr);
}
let style = document.createElement('style');
document.head.appendChild(style);
let colors = [
["44f", [
[1, 0],
[0, 1]
]],
['f44', [
[0, 0],
[1, 1]
]]
];
style.innerHTML = `td { height: 25px; width: 25px; }`+
colors.map(([color, filters]) => filters.map(
cs => 'table ' + cs.map((n,i) =>
((i ? 'td' : 'tr') + ':nth-child(' + (n ? 'odd' : 'even') + ')' ) ).join(' ')
).join(",") + '{ background: #' + color + '; }'
).join("");
Автор решения: Alexandr_TT
→ Ссылка
Для разнообразия решение с помощью SVG pattern
Создав один раз pattern вы сможете ничего не меняя заполнять любую фигуру и даже текст, добавив fill="url(#patt)", где #patt ID паттерна
Подробнее о pattern тут
#1. Квадрат
<svg width="200" height="200" version="1.1"
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" >
<defs>
<pattern id="patt"
x="0" y="0" width="40" height="40"
patternUnits="userSpaceOnUse" >
<g fill="#AAAAFF" stroke="white" stroke-width="1">
<rect x="0" y="0" width="19.5" height="19.5" />
<rect x="20" y="20" width="19.5" height="19.5" />
</g>
<g fill="#FFAAAA" stroke="white" stroke-width="1">
<rect x="20" y="0" width="19.5" height="19.5" />
<rect x="0" y="20" width="19.5" height="19.5" / >
</g>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%"
style=" fill: url(#patt);" />
</svg>#2. Круги и треугольник
<svg width="400" height="400" version="1.1"
viewBox="0 0 400 400"
xmlns="http://www.w3.org/2000/svg" >
<defs>
<pattern id="patt"
x="0" y="0" width="40" height="40"
patternUnits="userSpaceOnUse" >
<g fill="#AAAAFF" stroke="white" stroke-width="1">
<rect x="0" y="0" width="19.5" height="19.5" />
<rect x="20" y="20" width="19.5" height="19.5" />
</g>
<g fill="#FFAAAA" stroke="white" stroke-width="1">
<rect x="20" y="0" width="19.5" height="19.5" />
<rect x="0" y="20" width="19.5" height="19.5" / >
</g>
</pattern>
</defs>
<circle id="circ" cx="100" cy="100" r="98"
style="stroke: grey; stroke-width:3; fill: url(#patt);" />
<use xlink:href="#circ" x="80" y="0" />
<use xlink:href="#circ" x="180" y="0" />
<polyline points="50,350 200,220 350,350 50,350" fill="none" stroke="black"
style="stroke: grey; stroke-width:3; fill: url(#patt);" />
</svg>#3. Фрагмент карты
<svg width="500" height="500" viewbox="200 190 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="patt"
x="0" y="0" width="40" height="40"
patternUnits="userSpaceOnUse" >
<g fill="#AAAAFF" stroke="white" stroke-width="1">
<rect x="0" y="0" width="19.5" height="19.5" />
<rect x="20" y="20" width="19.5" height="19.5" />
</g>
<g fill="#FFAAAA" stroke="white" stroke-width="1">
<rect x="20" y="0" width="19.5" height="19.5" />
<rect x="0" y="20" width="19.5" height="19.5" / >
</g>
</pattern>
</defs>
<g fill="url(#patt)" stroke="black" stroke-width="2" >
<path id="CD11110" class="OUTLINE CD11110" d="M 455 297 l 4 -2 1 0 1 0 3 -1 4 5 7 3 2 6 0 8 -11 2 -11 1 -8 0 -9 1 -8 1 -9 1 -9 -2 -10 -1 -9 1 -4 3 -2 3 -6 -6 -3 -4 -5 -6 -4 -5 -2 -5 5 -3 0 -6 0 -10 0 -9 1 -9 -3 -4 -2 0 -2 0 -1 -4 0 -9 -5 -9 1 -10 -1 -11 -1 -6 2 -6 5 -2 7 -3 10 -2 2 -1 3 0 1 0 4 -2 8 -1 3 6 4 1 3 8 3 10 1 6 3 5 0 9 0 7 -1 5 -6 3 -6 4 -1 5 6 4 5 3 5 4 9 1 10 0 4 4 3 4 5 10 1 3 z " />
<path id="CD11140" class="OUTLINE" d="M 477 316 l 0 9 5 5 -1 3 -4 5 -4 5 -5 4 -4 7 -3 4 -4 3 -4 10 -2 -1 -3 -7 -2 -5 -2 1 -1 0 -2 -1 -3 1 0 0 -3 1 -4 2 -5 -5 -6 -3 -10 -3 -4 -1 -3 -1 -2 2 -4 -1 -3 -1 -9 0 -2 2 -4 3 0 -7 1 -4 -2 -2 0 -1 6 -3 6 -4 -1 -2 -2 -5 2 -3 4 -3 9 -1 10 1 9 2 9 -1 8 -1 9 -1 8 0 11 -1 z " />
<path id="CD11170" class="OUTLINE" d="M 394 349 l 3 1 4 1 2 -2 3 1 4 1 10 3 6 3 5 5 4 -2 3 -1 0 0 3 -1 2 1 1 0 2 -1 2 5 3 7 2 1 5 9 6 2 2 9 -4 5 -4 5 -5 6 -3 4 -5 4 -5 5 -5 4 -5 3 -8 8 -5 8 -7 3 -7 -1 -10 -4 -3 -1 -6 -3 -6 -5 -5 -3 -6 -3 -9 -3 1 -5 0 -10 -2 -8 -6 -11 5 -2 4 -1 5 -4 5 -6 2 -5 3 -6 6 -5 0 -3 -2 -3 4 -3 2 -2 z " />
</g>
</svg>#4. Текст
<svg width="500" height="500" version="1.1"
viewBox="0 0 500 500"
xmlns="http://www.w3.org/2000/svg" >
<defs>
<pattern id="patt"
x="0" y="0" width="40" height="40"
patternUnits="userSpaceOnUse" >
<g fill="#AAAAFF" stroke="white" stroke-width="2">
<rect x="0" y="0" width="20.5" height="20.5" />
<rect x="20" y="20" width="20.5" height="20.5" />
</g>
<g fill="#FFAAAA" stroke="white" stroke-width="2">
<rect x="20" y="0" width="20.5" height="20.5" />
<rect x="0" y="20" width="20.5" height="20.5" / >
</g>
</pattern>
</defs>
<text x="" y="200" font-size="140px" fill="url(#patt)" font-weight="bold"> Pattern </text>
</svg>