将 table 的图标更改为 jQuery

Question

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

这是我的 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') returns 具有您为其提供的名称的属性的值。所以你写的是 return HTML 元素上 class 属性的值，它不会继续 jQuery 链。 <table id="example"> 没有 class 属性，因此值 returned 将为 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 选择器的工作原理，因为您的选择总是会在整个 table.

中找到每个 <a> 标签

将 table 的图标更改为 jQuery

Change icon of table with jQuery

html

javascript

css

jquery

treetable