Highlighting on a diagonal

I want to be able to click a column header and highlight (red borders) a diagonal line starting at that header. So far I have disabled the sorting and I am able to get the index number of the header. The probelm is I can't figure out a way to highlight the cells.

Just to be clear, if header '1' was clicked: row 0 column 1 would highlight, then row 1 column 2, then row 2 column 3 etc. all the way down until the last row has been reached.

Just to answer my own question, here is the code:

obj.onCellClicked = function cellClickedOn(event, col, row){
            //****clear out old highlight
            while(lasti>=0 && lastj>=0)    {                
                obj.getCellTemplate(lasti, lastj).setStyle("border", "1px solid threeddarkshadow");
                lasti--;
                lastj--;
            }
            
            while(lasti2>=0 && lastj2<obj.getRowCount())    {                
                obj.getCellTemplate(lasti2, lastj2).setStyle("border", "1px solid threeddarkshadow");
                lasti2--;
                lastj2++;
            }
                        
            i=col*1;
            j=row*1;
            i2=col*1;
            j2=row*1;
            
            //****get to top end of diagonal
            while(i>=0 && j>=0)    {                
                i--;
                j--;
            }
            //****highlight diagonal
            while(i<obj.getColumnCount() && j<obj.getRowCount())    {                
                obj.getCellTemplate(i,j).setStyle("border", "3px solid red");
                i++;
                j++;
            }
            lastj=j-1;
            lasti=i-1;
            
                        //****get to top end of diagonal
            while(i2>=0 && j2<obj.getRowCount())    {                
                i2--;
                j2++;
            }
            //****highlight diagonal
            while(i2<obj.getColumnCount() && j2>=0)    {                
                obj.getCellTemplate(i2,j2).setStyle("border", "3px solid orange");
                i2++;
                j2--;
            }
            lastj2=j2-1;
            lasti2=i2+1;    
            
            obj.getCellTemplate(col,row).setStyle("border", "3px solid yellow");
        };  Inot a diagonal, but an "X", and when you click another square it makes the old "X" disappear by making its borders the same as the default(or what I had them set to).