3

Я хочу сделать это через 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 ответа 3

3

Можно сделать так

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')">

2
  • Спасибо не знал что через + можно так сделать все
    – user
    4 дек 2021 в 16:34
  • На здоровье! :)
    – Rudi
    4 дек 2021 в 16:37
2

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("");

2
  • Так ведь смысл в том, чтобы сделать на JS
    – Object417
    5 дек 2021 в 8:13
  • @Object417 Переделал
    – DiD
    5 дек 2021 в 9:28
2

Для разнообразия решение с помощью 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.