Javascript算法确定要渲染单元格的部分颜色

Question

我正在使用红色和蓝色的背景颜色在网格表中渲染单元格。

例如，对于上图中的第1行到第4行，我有一个这样的数组：

var ArrayColors = ['B','B','R','R','R','R','B','B','R','R','R','R'];

B不是Blue，而R是Red。

以下是条件：

1. 如果来自第1行和第1列颜色的循环的第一个结果是红色/蓝色，那么第二个结果应该与第一个颜色相同，并且位于第一个结果的下方。
2. 如果下一个结果与前一个结果的颜色不同，它将从第一行开始跳转到下一列。

以下是我目前的代码：

    function makeTable() {
        var fragment = document.createDocumentFragment();
        for (var i = 0; i < 6; i++) {
            var row = document.createElement('tr');
            fragment.appendChild(row);

            for (var j = 0; j < 12; j++) {
                var cell = document.createElement('td');
                cell.appendChild(document.createTextNode(i.toString() + ', ' + j.toString()));
                row.appendChild(cell);
            }
        }
        var target = document.getElementById('render');
        target.appendChild(fragment);
    }

我正在寻找有助于解决此问题的算法。

Answer 1

我建议首先将数组拆分成组。完成后，您可以在创建它时简单地查找每一行，以了解它是否有颜色。

var colors = ['B', 'B', 'R', 'R', 'R', 'R', 'B', 'B', 'R', 'R', 'R', 'R', 'B', 'B', 'B', 'B', 'B', 'B', 'B', 'R', 'B', 'R', 'R', 'R', 'B', 'R', 'R', 'R', 'B', 'R', 'R', 'R', 'B', 'B', 'R', 'B', 'R', 'B', 'B', 'B', 'R', 'R', 'B', 'B', 'B', 'B', 'R', 'B'];

function getGroups(array) {
  var groups = [];
  for (var i = 0, g = -1; i < array.length; i++) {
    var color = array[i];
    if (i == 0 || color != array[i - 1]) {
      g++;
      groups[g] = [];
    }
    groups[g].push(color);
  }
  return groups;
}

function getElements(groups) {
  var elements = [];

  var x = 0;

  var total = 0;

  var topLeft = document.createElement('th');
  topLeft.appendChild(document.createTextNode(''));
  topLeft.setAttribute('class', 'header-cell');

  elements[x] = [topLeft];
  
  var maxJ = Math.max.apply(Math, groups.map(function(e) {
    return e.length;
  }));

  for (var j = 0; j < maxJ; j++) {
    var cell = document.createElement('td');
    cell.appendChild(document.createTextNode(String.fromCharCode(65 + j)));
    cell.setAttribute('class', 'header-cell');
    elements[x].push(cell);
  }

  for (var z = 0; z < groups.length; z++) {
    var top = document.createElement('td');
    top.appendChild(document.createTextNode(z + 1));
    top.setAttribute('class', 'header-cell');

    elements[++x] = [top];

    for (var j = 0; j < 7; j++) {
      var cell = document.createElement('td');
      var color = z < groups.length && j < groups[z].length ? groups[z][j] : '';
      cell.appendChild(document.createTextNode(color ? ++total : ''));
      if (color) {
        cell.setAttribute('class', 'color-' + color);
      }

      elements[x].push(cell);
    }
  }
  return elements;
}

function populateTable(table, elements) {
  var maxY = Math.min.apply(Math, elements.map(function(e) {
    return e.length;
  }));
  var fragment = document.createDocumentFragment();

  for (var y = 0; y < maxY; y++) {
    var row = document.createElement('tr');

    for (var x = 0; x < elements.length; x++) {
      row.appendChild(elements[x][y]);
    }

    fragment.appendChild(row);
  }
  table.appendChild(fragment);
}

var groups = getGroups(colors);
var elements = getElements(groups);
var table = document.getElementById('grid');
populateTable(table, elements);

.color-R {
  background-color: hsl(0, 100%, 50%);
}

.color-B {
  background-color: hsl(240, 100%, 50%);
  color: white;
}

tr {
  width: 10px;
  height: 10px;
}

.header-cell {
  background-color: hsl(60, 100%, 80%);
}

#grid {
    border-collapse: collapse;
}

#grid th,
#grid td {
  border: 1px solid black;
  width: 30px;
  text-align: center;
}

<table id="grid"></table>