1

achei esse script que colore toda vez que eu clico em um linha,coluna em particular, mas eu queria colorir uma coluna, linha durante uma certa condição.

a minha ideia era fazer igual esse exemplo: http://www.exforsys.com/tutorials/c-algorithms/comb-sort.html aonde está em negrito

A condição seria colorir toda vez que há uma troca de valores na array (trocaValores(arrayNumeros[i], arrayNumeros[i+gap]);)

Digamos que eu tenha essa sequencia de números.

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

por exemplo: ao fazer a troca, printar colorido [3] e [6] na tabela criada.

Ou seja, ficaria assim quando printasse a tabela: [1][6][3][7]

se vocês olharem aqui, dá pra entender melhor:

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');
});

aqui eu crio uma tabela dinamica pra ir "printando" a array durante a execução (toda vez que há a troca de valores, ele printa essa tabela)

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

    }

há algum jeito de implementar isso?

4
  • Podes explicar melhor o que queres dizer com troca de valores? Onde está a função trocaValores()?
    – Sergio
    19/04/2015 às 15:42
  • scarsphoto.com.br/combsort/combsort.js aqui tem o script, mas eu atualizei o tópico com a função. 19/04/2015 às 15:50
  • @JoseMaximilian. Como e onde você chama a function trocaValores? 20/04/2015 às 11:48
  • no link do exemplo está escrito em C, porém, são combinações aleatórias. As suas combinações são estaticas ou aleatórias? 21/06/2015 às 16:31

2 Respostas 2

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

Você pode, opcionalmente, adicionar um parâmetro à swapElements e alterar a função pra, mesmo que você não faça a troca, ela também copie a linha e marque os dois elementos que você tentou comparar.

(Eu fiz pro bubble sort, obviamente; aí você alteraria a implementação pro comb sort no seu caso.)

-1

realizei uma implementação que talvez seja o que está procurando.

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>

No caso acima, eu altero a cor do elemento por 1 segundo apos a substituição de uma div.

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .