JQuery Loop Folders Change Icon

JQuery Loop Folders Change Icon

by Jason Doyle

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
        <div id="console-log">HELLO</div>
    <input id="GroupByColFlag" type="hidden"><input id="GroupByWebPartID12862"
    type="hidden">
    <table border="0" cellpadding="1" cellspacing="0" class=
    "ms-listviewtable ct-active" dir="none" id="onetidDoclibViewTbl0"
    onmouseover="EnsureSelectionHandler(event,this,12862)" summary=
    "Shared Documents Team Documents Library with custom metadata to categorize files"
    width="100%">
     
       
        <tbody id="titl12862-2_">
            <tr id="group0">
                <td class="ms-gb" colspan="100" nowrap>
                    <a href="javascript:" onclick=
                    "javascript:ExpCollGroup('12862-2_', 'img_12862-2_',event, false);return false;">
                    <img alt="expand" border="0" id="img_12862-2_" src=
                    "https://www.chicobag.com/images/minus_icon.gif">&nbsp;Folder Number</a> :
                    270<span style=
                    "font-weight: lighter;display: inline-block;">&nbsp;&lrm;(3)</span>
                </td>
            </tr>
        </tbody>
        <tbody id="tbod12862-2__"></tbody>
        <tbody id="titl12862-3_">
            <tr id="group0">
                <td class="ms-gb ct-active" colspan="100" nowrap>
                    <a href="javascript:" onclick=
                    "javascript:ExpCollGroup('12862-3_', 'img_12862-3_',event, false);return false;">
                    <img alt="expand" border="0" id="img_12862-3_" src=
                    "http://www.infed.com/images/btn-plus-minus.gif">&nbsp;Folder Number</a> :
                    271<span style=
                    "font-weight: lighter;display: inline-block;">&nbsp;&lrm;(1)</span>
                </td>
            </tr>
        </tbody>
        <tbody id="tbod12862-3__"></tbody>
        <tbody id="titl12862-4_">
            <tr id="group0">
                <td class="ms-gb" colspan="100" nowrap>
                   ...

CSS

.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

// JQuery Loop Folders Change Icon
// JS to loop thru TRs and swicth from plus minus to open close folders

// From
//http://www.infed.com/images/btn-plus-minus.gif
//https://www.chicobag.com/images/minus_icon.gif
// to
//http://fossies.org/linux/pac/res/pac_group_closed_16x16.png
//http://icons.iconseeker.com/png/fullsize/aspnet/folder-open-13.png

var consoleLine = "<p class=\"console-line\"></p>";
 
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};


// loop thru certain rows to find img with a plus or minus gif and change them
$("tr[id^='group']").each(function() {
    myRow = $(this);
    console.log('START');
    var closed = $(this).find("td:eq(0) img[src$='plus-minus.gif']");
    var open = $(this).find("td:eq(0) img[src$='minus_icon.gif']");
    
    if (closed && closed.attr('src') != null) {
        console.log('closed-> ' + closed.attr('src'));
        closed.attr('src', 'http://fossies.org/linux/pac/res/pac_group_closed_16x16.png');
    } else if (open && open.attr('src') != null) {
        console.log('open-> ' + open.attr('src'));
        open.attr('src', 'http://icons.iconseeker.com/png/fullsize/aspnet/folder-open-13.png');
    }
});