scrollable table with JSON data

by hamiltonlima

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
    <p>
        <table id="console" class="table table-condensed">
            <tbody></tbody>
        </table>
</div>

JavaScript

var lines = 5;

function criaTabela() {
    var spanIcon = '<span id="icon" class="glyphicon" aria-hidden="true"></span>';
    var separator = '<span>&nbsp;</span>';
    var spanMessage = '<span id="message"></span>';

    for (i = 0; i < lines; i++) {
        var tr = $('#console > tbody > #' + i);

        if (tr.length == 0) {
            $('#console > tbody:last').append('<tr id="' + i + '"><td></td></tr>');

            var td = $('#console > tbody > #' + i + ' > td');
            td.append(spanIcon);
            td.append(separator);
            td.append(spanMessage);
        }
    }
}

function moveLinhasParaBaixo() {

    for (i = lines - 1; i > 0; i--) {
        var aMessage = $('#console > tbody > #' + (i - 1) + '> td > #message').text();
        var aMessageType = $('#console > tbody > #' + (i - 1)).attr('messageType');
        $('#console > tbody > #' + i + ' > td > #message').text(aMessage);
        $('#console > tbody > #' + i).attr('messageType', aMessageType);
    }

}

function add2Console(data) {

    for (key in data) {
        var one = data[key];
        console.log('processando ', one);

        moveLinhasParaBaixo();
        $('#console > tbody > #0 > td > #message').text(one.message);
        $('#console > tbody > #0').attr('messageType', one.type);
    }

    formatLines();

}

formatRules = [ {
	'type' : 'success',
	'class' : 'success',
	'icon' : 'glyphicon-ok-sign'
}, {
	'type' : 'warning',
	'class' : 'warning',
	'icon' : 'glyphicon-exclamation-sign'
}, {
	'type' : 'danger',
	'class' : 'danger',
	'icon' : 'glyphicon-fire'
} ];


function formatLines() {
    var exclamation = 'glyphicon-exclamation-sign';

    for (i = 0; i < lines; i++) {
        var tr = $('#console > tbody > #' + i);
        console.log('tr=' + i + ' messageType=' + tr.attr('messageType'));

        for (key in formatRules) {

            var rule = formatRules[key];

            if (tr.attr('messageType') == rule.type) {
                $('#console > tbody > #' +...