セルをレンダリングするセクションの色を決定するJavascriptアルゴリズム

Question

私は赤と青の背景色を使ってグリッドテーブルにセルを描画しています。例えば

、Iは、行4の画像において上で行1のためのこのような配列を有する：RはRedためのものであるBは、Blueためのものであること

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

ありません。ここ

条件である：

1. 行1および列1色に位置ループからの最初の結果は、青色/赤色である場合、第2の結果は、最初と同じ色でなければなりません、最初の部分の下に配置されます。
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>