Question

我需要突出显示我桌子的一些行。此突出显示基于我的response对象中存在的行。该对象可以如下：

<table id="ListRequests" class="table table-striped">    
    <tbody>
        <tr id="13955">
            <td>JEAN DUPONT</td>                
            <td>ACLIMEX SPRL</td>
        </tr>
    </tbody>
</table>

这是我的javascript代码：

        var id = $("tbody tr", response).attr('id');
        var cols = $('#' + id + ' td');
        cols.effect("highlight", {}, 30000);

仅当我的响应对象只包含1行时才能正常工作。现在我需要能够一次突出显示多行。例如，使用下面的响应对象：

<table id="ListRequests" class="table table-striped">    
    <tbody>
        <tr id="13955">
            <td>JEAN DUPONT</td>                
            <td>ACLIMEX SPRL</td>
        </tr>
        <tr id="13954">
            <td>MIKE GIVER</td>                
            <td>ARGO INTERNATIONAL CORP</td>
        </tr>
    </tbody>
</table>

知道如何为此目的调整我的javascript代码吗？

Answer 1

如果你真的想按照你的方式去做，那么你需要使用每个

var trs = $("tbody tr", response);
trs.each( function () {
    var id = this.id,
        cols = $('#' + id + ' td');
    cols.effect("highlight", {}, 30000);
});

最好返回带有id的JSON对象进行选择。

Answer 2

这是一个工作片段。

我们的想法是通过循环var users = []; users.push({ username: "admin", password: "admin" }); this.showAllUsers = function() { console.log(users); }; this.addUser = function(user) { if('username' in user && 'password' in user) { users.push({ username: user.username, password: user.password }) } else { throw "Invalid object"; } }; this.isExist = function(user) { console.log(users.indexOf({ username: "admin", password: "admin" })); };节点从你得到的响应中删除id，从这些id为你感兴趣的节点构建一个css选择器，最后突出显示它们。

tr

function highlight(response){
  // retrieve the ids from the response
  var ids = $(response).find("tbody tr").map(function(){
    // `this` will be the trs one after the other.
    // `map` will put all returned values in an array.
    return this.getAttribute("id");
  }).get();
  // build the css selector
  var selector = "#" + ids.join(",#");
  // highlight the corresponding nodes
  $(selector).effect("highlight", {}, 30000);
}

// Call highlight with your response example.
highlight('<table id="ListRequests" class="table table-striped"><tbody><tr id="13955"><td>JEAN DUPONT</td><td>ACLIMEX SPRL</td></tr><tr id="13954"><td>MIKE GIVER</td><td>ARGO INTERNATIONAL CORP</td></tr></tbody></table>');

Answer 3

attr返回单个值，无论前进选择器匹配了多少元素。

如果要将每个选定元素映射到ID并返回数组，则需要map：

var ids = $("tbody tr", response).map(function (i, e) { return $(e).attr('id'); });

获得ID列表后，您可以迭代该列表，并突出显示DOM中匹配的行：

ids.forEach(function (id) {
  var cols = $('#' + id + ' td');
  cols.effect("highlight", {}, 30000);
});

在javascript中突出显示我的表的某些行

3 个答案: