color a certain row, column during an iteration

Question

color a certain row, column during an iteration

Navigation

#1 by (1 votes)
#2 by (-1 votes)

1

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

My idea was to do the same thing: link where it is in bold

The condition would color every time there is an exchange of values in the array (changeValues (arrayNumbers [i], arrayNumbers [i + gap]);

Let's say I have this sequence of numbers.

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

For example, when you make the change, you will start printing color [3] and [6] in the created table.

That is, it would look like this when you print the table: [1] [6] [3] [7]

If you look here, you can understand better:

link

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 "print" the array during execution (every time there is a value change, it starts 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);

    }

Is there any way to implement this?

javascript

asked by anonymous 19.04.2015 / 17:41

2 answers

Reporting problem with JasperReports and Chrome Save item in Combobox [closed]

score 1 · 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 do not make the switch, it also copies the line and marks the two elements you tried to compare.

(I did pro bubble sort , of course; then you would change the pro comb sort implementation in your case.)

score -1 · Answer 2

I've made an implementation that might be what you're 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 case above, I change the color of the element for 1 second after replacing a div.