Row / Column marker

[globlalways]

Tracking a single row, can be very fustrating if you have more than 100 columns and more than 50 rows.

So I wrote a small extension, that adds the following functionality for each table using odd/even_row classnames:
If you click on a row each column will be highlighted. If you click again the highlight will be removed.

And the other functionality is very similar, it highlights a complete column in a table if you click on it.

Have a look at the attatched screenshot how it will look like.

Here the additions:
New: /js.php

var marked_row = new Array;
var marked_column = new Array;
var infotable;


function markRowsInit() {
    // for every table row ...
    var rows = document.getElementsByTagName('tr');
    for ( var i = 0; i < rows.length; i++ ) {
        // ... with the class 'odd' or 'even' ...
        if ( 'odd_row' != rows[i].className.substr(0,7) && 'even_row' != rows[i].className.substr(0,9) ) {
            continue;
        }
        // ... add event listeners ...
        // ... to highlight the row on mouseover ...
        if ( navigator.appName == 'Microsoft Internet Explorer' ) {
            // but only for IE, other browsers are handled by :hover in css
            rows[i].onmouseover = function() {
                this.className += ' hover';
            }
            rows[i].onmouseout = function() {
                this.className = this.className.replace( ' hover', '' );
            }
        }
        if(rows[i].title.length == 0) {
            rows[i].title = "Row #" + i;
        }

        // ... and to mark the row on click ...
        rows[i].onmousedown = function() {
            var unique_id;
            var checkbox;

            if ( this.title.length > 0 ) {
                unique_id = this.title;
            } else {
                return;
            }

            if ( typeof(marked_row[unique_id]) == 'undefined' || !marked_row[unique_id] ) {
                marked_row[unique_id] = true;
            } else {
                marked_row[unique_id] = false;
            }

            if ( marked_row[unique_id] ) {
                this.className += ' marked';
            } else {
                this.className = this.className.replace(' marked', '');
            }
        }
    }
}

function markColumns_Init() {
    var tables = document.getElementsByTagName('table');
    for ( var i = 0; i < tables.length; i++ ) {
        if ( 'tableinfo' == tables[i].className.substr(0,10)) {
            infotable = tables[i];
            break;
        }
    }

    if(!infotable) {
        return;
    }

    var columns = infotable.getElementsByTagName("tr")[0].getElementsByTagName("td");

    for(i=0; i<columns.length;i++) {
        columns[i].title = i;

        columns[i].onmousedown = function() {
            var unique_id;

            if ( this.title.length > 0 ) {
                unique_id = this.title;
            } else {
                return;
            }

            if ( typeof(marked_column[unique_id]) == 'undefined' || !marked_column[unique_id] ) {
                marked_column[unique_id] = true;
            } else {
                marked_column[unique_id] = false;
            }

            var rows = infotable.getElementsByTagName("tr");

            for(var j=0;j<rows.length;j++) {
                col = rows[j].getElementsByTagName("td")[unique_id];

                if ( marked_column[unique_id] ) {
                    col.className += ' marked';
                } else {
                    col.className = col.className.replace(' marked', '');
                }
            }
        }

    }
}


function onLoadBody() {
    markRowsInit();
    markColumns_Init();
}

window.onload=onLoadBody;

Addtions to /css.css

table.tableinfo tr.marked td,
table.tableinfo tr td.marked
{
    border:1px solid red;
}

Thats it. To load the javascript extensio we need the follwing code:

<script src="js.js" type="text/javascript" language="javascript"></script>

I've added this to the /include/config.inc.php:

*** config.inc.php.bak  Fri Jul  7 20:07:45 2006
--- config.inc.php      Fri Jul  7 20:07:55 2006
***************
*** 857,862 ****
--- 857,863 ----
  <meta name="Author" content="ZABBIX SIA (Alexei Vladishev, Eugene Grigorjev)">
  <link rel="stylesheet" href="css.css">

+ <script src="js.js" type="text/javascript" language="javascript"></script>
  <?php
  //    if($USER_DETAILS['alias']=='guest')
  //    {