使用 jQuery 更改表格的图标

Question

我想在 jQuery 中更改表格的图标，但我无法找到元素并更改它的背景。我正在使用 jQuery 的树表库。

这是我的 jQuery 代码：

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);
        }
}

这是我的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> 

我想根据从数据库中获取的内容更改<td> 的图标，这意味着如果状态为 1，我加载一张背景图片，如果状态为 2，我加载另一张。 我的<td> 元素包含<span> 和<a> 标签，我想更改<a> 标签的背景图片。我怎样才能在jQuery 中实现这一点？

这是页面加载后我的元素：

这是我得到的错误：

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

编辑：

这段代码是我尝试为每个 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");

        }

}

提前致谢！

Answer 1

您收到该错误是因为您的 jQuery 链中有一个不必要的 .attr('class')。

.attr('name') 返回具有您提供给它的名称的属性的值。因此，您正在编写的内容将返回 HTML 元素上的 class 属性的值，它不会继续 jQuery 链。 <table id="example"> 没有class 属性，因此返回的值将是undefined。然后，您尝试在链上运行更多 jQuery 方法，例如 .find()，但 undefined 不是 jQuery 对象，您不能这样做。

将你的行改为：

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

第二个问题是你的 for 循环需要在你的 .then() 成功处理函数中。否则，它将立即运行，而不是在 AJAX 调用完成后运行。

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)")
})

第三，您应该阅读 jQuery 选择器的工作原理，因为您的选择总是会在整个表格中找到每个 <a> 标记。