Question

背景资料

我有两个表，一个是可用用户列表，名为＆＃34;用户＆＃34;另一个名为＆＃34; selected_users＆＃34;。当点击users表中的一行时，app会从selected_users表中添加/删除记录

<table id=users>
<tr class="odd" role="row" id="row_89"><td>89</td><td>John Doe</td><td>23819</td><td>mm2@yahoo.com</td></tr>
<tr class="even" role="row" id="row_90"><td>90</td><td>John Doe</td><td>23819</td><td>36338</td></tr>
<tr class="odd" role="row" id="row_91"><td>91</td><td>Jane Doe</td><td>23820</td><td>jane@yahoo.com</td></tr>
<tr class="even" role="row" id="row_92"><td>92</td><td>Jane Doe</td><td>23820</td><td>28519</td></tr>
<tr class="odd" role="row" id="row_93"><td>93</td><td>Jim Bob</td><td>23801</td><td>jbob@yahoo.com</td></tr>
</table>

<table id=selected_users class="table table-condensed table-bordered" width="80%">
      <tr class="info"><td colspan="4"><b>Selected Users:</b></td></tr>
</table>

问题

我需要更改现有逻辑，以便在选择可用用户列表中的行时，可用用户表中具有匹配＆＃34; pid＆＃34;的所有其他行。（应该是第3列）应该添加到selected_users表中。

这是当有人点击可用用户表时触发的代码：

    $('#users tbody').on('click', 'tr', function () {
        var id = this.id;
        var tr;
        tr=$('<tr/>');

        var index = $.inArray(id, selected);
        if ( index === -1 ) {
            selected.push( id ); //select/highlight in list of available users.

            // Find td's inside this tr and add to selected_users table
            var tds = $(this).find('td');
            tr.append("<td>" + tds.eq(0).text() + "</td>");
            tr.append("<td>" + tds.eq(1).text() + "</td>");
            tr.append("<td>" + tds.eq(2).text() + "</td>");
            tr.append("<td>" + tds.eq(3).text() + "</td>");
            tr. attr('id', id.substring(4));
            $('#selected_users').append(tr);

            //loop through the avail users table and select all records with the same p number.
            $("users td").each(function(i,o){
                // new code goes here
            }
        } else {
            selected.splice( index, 1 ); //deselect from list of avail users
            //remove matching record from selected_users table.
            var record_id = id.substring(4);
            var rowtodelete = document.getElementById(record_id);
            rowtodelete.parentNode.removeChild(rowtodelete);
        }
        $(this).toggleClass('selected');
    } );
} );

到目前为止我有什么

我正在考虑在评论部分添加这样的代码（伪代码）＆＃34;新代码在这里＆＃34;

       //loop through the avail users table and select all records with the same pager number.
        $("users tr").each(function(){
            $(this).find('td ....
        });

我不确定如何查找第三列是否与tds.eq（2）.text（）

中的第三列相匹配

任何建议都将不胜感激

编辑1

这是我到目前为止所做的：

        //2015.06.11 - find and add all other rows with matching p number
            var thisTR = $(this);
            console.log(thisTR);
            //select all siblings with same value in third column
            thisTR.siblings().filter(function() {
                    console.log($('td',this).eq(2).text() );
                    //console.log($('td', thisTR).eq(2).text());
                    if ($('td',this).eq(2).text() == $('td', thisTR).eq(2).text() ) {
                            console.log("i found a match");
                            console.log("what is the row for: " + $('td',this).eq(2).text());
                    };
            });

我只需要一种方法来识别找到匹配td的行，然后执行类似于我已经在为selected_users添加行的操作： var tr; tr =＆＃34;＆＃34 ;; ...找到行然后...... tr.append（＆＃34;＆＃34; + tds.eq（0）.text（）+＆＃34;＆＃34;）; tr.append（＆＃34;＆＃34; + tds.eq（1）.text（）+＆＃34;＆＃34;）; tr.append（＆＃34;＆＃34; + tds.eq（2）.text（）+＆＃34;＆＃34;）; tr.append（＆＃34;＆＃34; + tds.eq（3）.text（）+＆＃34;＆＃34;）; TR。 attr（＆＃39; id＆＃39;，id.substring（4））; $（＆＃39;＃SELECTED_USERS＆＃39）附加（TR）;

Answer 1

我的建议是使用data-自定义属性为元素添加用户ID，以便您可以使用选择器轻松访问它们。

例如，请注意以下data-uid属性：

<tr class="odd" role="row" id="row_89" data-uid="23819"><td>89</td><td>John Doe</td><td>23819</td><td>mm2@yahoo.com</td></tr>

有了这个，抓住所有相关行很容易：

rows = $('#users tr[data-uid=' + uid + ']');
// ...

Answer 2

以下是您可以使用的内容 - .filter( function )

//save a reference of the current row
var thisTR = $(this);

//select all siblings with same value in third row
thisTR.siblings().filter(function() {
    return $('td',this).eq(2).text() == $('td', thisTR).eq(2).text();
})

//Iterate through them and do what needs to be done.
.each(function() {
    //do something
    //here 'this' refers to tr (matched row)
    //$('td', this) should give you all the tds in 'this' row 
});

javascript - 遍历表并检查值

2 个答案: