Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts

    change color of every other row

    I am using a great script i downloaded at http://kryogenix.org/code/browser/sorttable/
    to sort tables by the header.
    my problem is I want to add to this that everyother row should have a gray background.

    I now do it by assigning a different class to every other row but when you sort it keeps the class. -- is there a way to change the background color of every other row in javascript that I can use with the above script?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to your javascript file.
    Code:
    function setBg()
    {
    	var trs = thisTbl.getElementsByTagName('tr');
    	for(var i = 0; i < trs.length; i++)
    	{
    		trs[i].style.background = ((i % 2) == 0) ? '#EEE' : '#FFF';
    	}
    }
    Then change this
    Code:
    function sortables_init() {
        // Find all tables with class sortable and make them sortable
        if (!document.getElementsByTagName) return;
        tbls = document.getElementsByTagName("table");
        for (ti=0;ti<tbls.length;ti++) {
            thisTbl = tbls[ti];
            if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
                //initTable(thisTbl.id);
                ts_makeSortable(thisTbl);
            }
        }
    }
    to this
    Code:
    function sortables_init() {
        // Find all tables with class sortable and make them sortable
        if (!document.getElementsByTagName) return;
        tbls = document.getElementsByTagName("table");
        for (ti=0;ti<tbls.length;ti++) {
            thisTbl = tbls[ti];
            if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
                //initTable(thisTbl.id);
                ts_makeSortable(thisTbl);
                setBg();
            }
        }
    }
    and change this
    Code:
    function ts_resortTable(lnk,clid) {
        // get the span
        var span;
        for (var ci=0;ci<lnk.childNodes.length;ci++) {
            if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
        }
        var spantext = ts_getInnerText(span);
        var td = lnk.parentNode;
        var column = clid || td.cellIndex;
        var table = getParent(td,'TABLE');
        
        // Work out a type for the column
        if (table.rows.length <= 1) return;
        var itm = ts_getInnerText(table.rows[1].cells[column]);
        sortfn = ts_sort_caseinsensitive;
        if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
        if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
        if (itm.match(/^[$]/)) sortfn = ts_sort_currency;
        if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
        SORT_COLUMN_INDEX = column;
        var firstRow = new Array();
        var newRows = new Array();
        for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
        for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }
    
        newRows.sort(sortfn);
    
        if (span.getAttribute("sortdir") == 'down') {
            ARROW = '&nbsp;&nbsp;&uarr;';
            newRows.reverse();
            span.setAttribute('sortdir','up');
        } else {
            ARROW = '&nbsp;&nbsp;&darr;';
            span.setAttribute('sortdir','down');
        }
        
        // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
        // don't do sortbottom rows
        for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
        // do sortbottom rows only
        for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
        
        // Delete any other arrows there may be showing
        var allspans = document.getElementsByTagName("span");
        for (var ci=0;ci<allspans.length;ci++) {
            if (allspans[ci].className == 'sortarrow') {
                if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
                    allspans[ci].innerHTML = '&nbsp;&nbsp;&nbsp;';
                }
            }
        }
            
        span.innerHTML = ARROW;
    }
    to this
    Code:
    function ts_resortTable(lnk,clid) {
        // get the span
        var span;
        for (var ci=0;ci<lnk.childNodes.length;ci++) {
            if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
        }
        var spantext = ts_getInnerText(span);
        var td = lnk.parentNode;
        var column = clid || td.cellIndex;
        var table = getParent(td,'TABLE');
        
        // Work out a type for the column
        if (table.rows.length <= 1) return;
        var itm = ts_getInnerText(table.rows[1].cells[column]);
        sortfn = ts_sort_caseinsensitive;
        if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
        if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
        if (itm.match(/^[$]/)) sortfn = ts_sort_currency;
        if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
        SORT_COLUMN_INDEX = column;
        var firstRow = new Array();
        var newRows = new Array();
        for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
        for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }
    
        newRows.sort(sortfn);
    
        if (span.getAttribute("sortdir") == 'down') {
            ARROW = '&nbsp;&nbsp;&uarr;';
            newRows.reverse();
            span.setAttribute('sortdir','up');
        } else {
            ARROW = '&nbsp;&nbsp;&darr;';
            span.setAttribute('sortdir','down');
        }
        
        // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
        // don't do sortbottom rows
        for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
        // do sortbottom rows only
        for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
        
        // Delete any other arrows there may be showing
        var allspans = document.getElementsByTagName("span");
        for (var ci=0;ci<allspans.length;ci++) {
            if (allspans[ci].className == 'sortarrow') {
                if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
                    allspans[ci].innerHTML = '&nbsp;&nbsp;&nbsp;';
                }
            }
        }
        setBg();
        span.innerHTML = ARROW;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts

  • #4
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    thanks Aerospace_Eng_

    works perfect!!

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The new sorttable.js file has changed in the last 2 years... are you able to repost which areas of the .js file to change in order to get this desired effect???

    Please and thanks!!

  • #6
    Senior Coder
    Join Date
    May 2004
    Posts
    1,441
    Thanks
    15
    Thanked 0 Times in 0 Posts
    does anyone know what updates need to be done to the newest version for this?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Bill Posters View Post
    Page cannot be found.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by esthera View Post
    does anyone know what updates need to be done to the newest version for this?
    you can use CSS for this.
    it wouldn't need any javascript, so you could use whatever sorter you want.
    google "zebra stripe css" for info.

    if you care about ie6+7, then you'll have to use javascript.
    you can still use mostly CSS, and javascript for ie only.

    just add the javascript version's selector (class) to the css:
    Code:
    #mytable tr:nth-child(even), #mytable tr.even { background:#fff;}
    #mytable tr:nth-child(odd),  #mytable tr.odd { background:#ddd;}
    and everytime you sort the table, and you are in IE, loop through the rows and apply "even" or "odd" class to the table rows.

    if you post the code you are using, i'm sure i can help you integrate the above's fallback IE javascript into your table sorter.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •