Change icon of table with jQuery

I want to change the icon of a table in jQuery but I am unable to find the element and change the background of it. I am working with jQuery's treetable library.

This is my jQuery code:

Factory.query().$promise.then(function(data) {
        $rootScope.tree = data;
        console.log($rootScope.tree);
        buildTreeTable($rootScope.tree);
})


function buildTreeTable(tree){
    $("#example").treetable({
    expandable:     true,
    onNodeExpand:   nodeExpand,
    onNodeCollapse: nodeCollapse
});

function nodeExpand () {
    getNode(this.id);  
}


function nodeCollapse () {
    console.log("Collapsed: " + this.id);
}

$("#example tbody").on("mousedown", "tr", function() {
                                        $(".selected").not(this).removeClass("selected");
        $(this).toggleClass("selected");
});


var len = tree.length;
for(var i = 0; i < len; i++){
    if (tree[i].status == 1){
        var print = $('#example').attr('class').find('a').css("background-image","url(../../images/image.png)");
        console.log("Status is 1. Load icon for 1", print);
        }
}

And this is my html:

<div class="panel-body">
                <table id="example">
                <tbody>
                <thead>

                    <tr>
                        <th >Tree data</th>
                        <th>Header1</th>
                        <th>Header2</th>
                    </tr>
                </thead>
                </tbody>
                </table> 

                </div> 

I want to change the icon of the <td> depending on what I get from my database, meaning if the status is 1, I load one background image, if the status is 2, I load another one. My <td> element contains a <span> and <a> tag and I want to change the background image of <a> tag. How can I achieve that in jQuery?

This are my elements after the page is loaded:

This is the error that I get:

TypeError: $(...).attr(...).find is not a function

EDIT:

This code is how I am trying to load separate icons for each tr

function changeIcon(data){
        for(var i = 0; i < data.length; i++){
                if (data[i].status == 0){
                $('tr span.icon').each(function(){
                $(this).addClass('status');
        })
        console.log("Status is 0. Load icon for 0");
        }else if(data[i].status == 1){
        console.log("Status is 1. Load icon for 1");
        }else if(data[i].status == 2){
        console.log("Status is 2. Load icon for 2");
        }else
        console.log("Status is 3. Load icon for 3");

        }

}

Thanks in advance!

You're getting that error because you have an unnecessary .attr('class') in your jQuery chain.

.attr('name') returns the value of an attribute with the name you supply to it. So what you're writing will return the value of the class attribute on the HTML element, it will not continue the jQuery chain. The <table id="example"> has no class attribute, so the value returned will be undefined. You are then trying to run more jQuery methods on the chain like .find() but undefined isn't a jQuery object, you can't do that.

Change your line to:

 $('#example').find('a').css("background-image","url(../../images/image.png)");

The second problem is your for loop needs to be inside your .then() success handler function. Otherwise, it will get run immediately, rather than after the AJAX call finishes.

Factory.query().$promise.then(function(data) {
    $rootScope.tree = data;
    console.log($rootScope.tree);
    buildTreeTable($rootScope.tree);

    // put your background image code here
    $('#example').find('a').css("background-image","url(../../images/image.png)")
})

Third, you should read up on how jQuery selectors work because your selection is always going to find every <a> tag inside the entire table.