color a certain row, column during an iteration

Question

I found this script that colors every time I click on a row, column in particular, but I wanted to color a column, row during a certain condition.

my idea was to make the same example: http://www.exforsys.com/tutorials/c-algorithms/comb-sort.html where it is in bold

The condition would be to color every time there is a value exchange in the array (trocaValores(arrayNumeros[i], arrayNumeros[i+gap]);)

Let’s say I have this sequence of numbers.

[3][6][1][7]

for example: when making the exchange, print colorful [3] and [6] in the table created.

I mean, it would look like this when I printed the table: [1][6][3][7]

If you look here, you can understand better:

http://scarsphoto.com.br/combsort/combsort.html

function trocaValores(a, b){
    tempValor = a.valor;
    a.setValor(b.valor);
    b.setValor(tempValor);
}


$('td').click(function() {
    $(this).css('backgroundColor', '#000');
});

here I create a dynamic table to go "printing" the array during execution (every time there is the exchange of values, it prints this table)

function adicionaTabela() {
         contador++; 
        var myTableDiv = document.getElementById("tabelaDinamica");

        var table = document.createElement('TABLE');
        table.border='1';

        var tableBody = document.createElement('TBODY');
        table.appendChild(tableBody);


           var tr = document.createElement('TR');
           tableBody.appendChild(tr);
           var teste = arrayNumeros.length;
           for (var j=0; j<teste; j++){
               var td = document.createElement('TD');

               td.width='75';

               td.appendChild(document.createTextNode(arrayNumeros[j].valor));

               tr.appendChild(td);

            }

        myTableDiv.appendChild(table);

    }

there is some way to implement this?

Answer 1

function initializeTable(elements) {
    var table = document.createElement('table');
    document.body.appendChild(table);
    var firstRow = document.createElement('tr');
    elements.forEach(function (item, index) {
        var cell = document.createElement('td');
        cell.textContent = item.toString();
        firstRow.appendChild(cell);
    });
    table.appendChild(firstRow);
    
    return table;
}

function swapElements(table, firstIndex, secondIndex) {
    if (firstIndex === secondIndex) return;
    
    table.appendChild(table.lastChild.cloneNode(true));
    
    var temp = table.lastChild.children[firstIndex].textContent;
    table.lastChild.children[firstIndex].textContent = table.lastChild.children[secondIndex].textContent;
    table.lastChild.children[secondIndex].textContent = temp;
    
    Array.prototype.forEach.call(table.lastChild.children, function (cell, index) {
        cell.style.backgroundColor = (index === firstIndex || index === secondIndex) ? '#FF6' : '#FFF';
    });
}

function sortTable(table) {
    for (var i = 0; i < table.lastChild.children.length; i++) {
        for (var j = i+1; j < table.lastChild.children.length; j++) {
            if (parseInt(table.lastChild.children[i].textContent) > parseInt(table.lastChild.children[j].textContent)) {
                swapElements(table, i, j);
            }
        }
    }
}

function shuffleArray(array) {
    for (var remainingItems = array.length; remainingItems > 0; remainingItems--) {
        var sourceIndex = Math.floor(Math.random() * remainingItems);
        var destinationIndex = remainingItems - 1;
        var temp = array[sourceIndex];
        array[sourceIndex] = array[destinationIndex];
        array[destinationIndex] = temp;
    }
}

var exampleArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
shuffleArray(exampleArray);
var table = initializeTable(exampleArray);
sortTable(table);

You can optionally add a parameter to swapElements and change the function to, even if you don’t make the switch, it also copies the line and marks the two elements you tried to compare.

(I did it for Bubble Sort, obviously; then you would change the pro implementation Comb Sort in your case.)

Answer 2

realized an implementation that maybe is what you are looking for.

var appExemplo = angular.module('appExemplo', []);
console.log(appExemplo);

appExemplo.controller('ctrlLista', ['$scope', function ($scope) {
    $scope.numeros = [1, 6, 3, 7];
}]);

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("source", ev.target.id);    
}

function drop(ev) {
    ev.preventDefault();
    var target = ev.target;
    var source = document.getElementById( ev.dataTransfer.getData("source"));
    while (!target.classList.contains("custom-numero")) {
        target = target.parentNode;
    }
    
    if (source != target) {
        var targetParent = target.parentNode;
        var sourceParent = source.parentNode;
        targetParent.appendChild(source);
        sourceParent.appendChild(target);
        
        target.classList.add("color-change");
        source.classList.add("color-change");
        
        target.dataset.interacoes = parseInt(target.dataset.interacoes) + 1;
        source.dataset.interacoes = parseInt(source.dataset.interacoes) + 1;
        
        window.setTimeout(function () {
            target.dataset.interacoes = parseInt(target.dataset.interacoes) - 1;
            source.dataset.interacoes = parseInt(source.dataset.interacoes) - 1;
            
            if (target.dataset.interacoes == "0") {
                target.classList.remove("color-change");
            }
            if (source.dataset.interacoes == "0") {
                source.classList.remove("color-change");
            }
        }, 1000);
    }
}

.custom-numero {
    float: left;  
    width: 41px;
    line-height: 41px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0px 0px 10px black;
    margin-right: 10px;
}

.color-change {
    background-color: gainsboro;
}

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="appExemplo">
    <div ng-controller="ctrlLista">
        <div ng-repeat="numero in numeros track by $index">
            <div id="number-{{ $index }}" class="custom-numero" 
                draggable="true" 
                ondragstart="drag(event)" 
                ondrop="drop(event)" 
                ondragover="allowDrop(event)"
                data-interacoes="0" >
                <label class="ng-binding">{{ numero }}</label>
            </div>
        </div>
    </div>
</div>

In the above case, I change the color of the element by 1 second after replacing a div.