Question

我在html中有以下类型的表，它是由php动态生成的：

<tr><td>Kiss the Girls</td><td>2016-01-01</td></tr>
<tr><td>Kiss the Girls</td><td>2016-02-05</td></tr>
<tr><td>Along Came a Spider</td><td>2016-01-07</td></tr>
<tr><td>Along Came a Spider</td><td>2016-01-22</td></tr>
<tr><td>Along Came a Spider</td><td>2016-03-31</td></tr>

我希望能够拥有一个动态显示过滤器，允许用户点击一个框并隐藏除最新版本的手稿之外的所有内容。所以它可能看起来像：

<tr><td>Kiss the Girls</td><td>2016-02-05</td></tr>
<tr><td>Along Came a Spider</td><td>2016-03-31</td></tr>

此时，<tr>或<td>标签都没有ID或类，但我可以轻松地将类添加到第一列（例如<td class='bookTitle'>）。页面上只有一个表格，php已按日期对其进行排序。我对jQuery或原生JavaScript开放，但我认为使用jQuery会更容易。似乎可以通过在更改名称之前抓住最后一行来完成，但我不知道该怎么做。有什么想法吗？

Answer 1

迭代tr并存储在键值对中，其中key为td内容，并将值作为对象，然后从中获取对象。

＆＃13;

var a = {}; // object for storing dom element object

$('table tr').each(function() {
  a[$('td:first', this).text().trim()] = this; // update the dom element object based on the column
});

var $res = $($.map(a, function(v) {
  return v; // get objects and convert to jQuery object
}));

console.log($res);

$res.css('color', 'red');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-01-01</td>
  </tr>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-02-05</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-07</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-22</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-03-31</td>
  </tr>
</table>

＆＃13;

<小时/> 仅供参考：如果您想维护订单，那么使用索引和对象数组的值，并根据

设置顺序

Answer 2

根据'Seems like it could be done by just grabbing the last row before it changes names'，这就是我提出来的：

var rows = $("table tr");
if(rows.length > 0){
  var last = $(rows[0]).find('td')[0].innerText;
  for(var i=1; i<rows.length; i++){
     var row = $(rows[i]);
     var text = row.find('td')[0].innerText;
     if(text === last){
        $(rows[i-1]).hide();
     }
     last = text;
  }
}

请参阅Finding last occurrence of text上Tan Li Hau（@tanhauhau）的笔CodePen。

Answer 3

您可以反向迭代并删除之前看到的所有内容：

function filterPreviousVersions ( ) {
    var seen = {};
    $( $('tr').get( ).reverse( ) ).each( function ( ) {
        var text = $( 'td', this ).first( ).text();
        if ( seen[ text ] )
            $( this ).remove();
        seen[ text ] = true;
    } );
}

filterPreviousVersions();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-01-01</td>
  </tr>
  <tr>
    <td>Kiss the Girls</td>
    <td>2016-02-05</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-07</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-01-22</td>
  </tr>
  <tr>
    <td>Along Came a Spider</td>
    <td>2016-03-31</td>
  </tr>
</table>

Answer 4

如果在添加行时按递增顺序添加ID，

你可以用这个：

var valArray = [];
$('.maindiv').each(function() {
  valArray.push(parseInt($(this).attr('id'), 10));
})
valArray.sort(function(a, b) {
  return a - b
})

alert("Last row : " + document.getElementById(valArray[valArray.length - 1]).innerHTML); // highest`
alert("Second last : " +  document.getElementById(valArray[valArray.length - 2]).innerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="2" class="maindiv">Contents in row 2</div>
<div id="5" class="maindiv">Contents in row 5</div>
<div id="3" class="maindiv">Contents in row 3</div>
<div id="1" class="maindiv">Contents in row 1</div>
<div class="main">Contents in test row</div>
<div id="4" class="maindiv">Contents in row 4</div>

Answer 5

把它们放在一起：

Succint :(可能会对包含许多重复值的大型表产生一些性能影响）

$('tr').each(function(){
  $("tr :contains('" + $('td', this).first().html() + "')").last()
   .parent().css('color', 'red'); 
});

succint版本的说明： -

$('tr').each(function(){ // for each row of the table
  $("tr                    // find a child inside a tr 
     :contains('"          // that contains the text
    +  $('td', this)         // present within a td of the row (in line 1) 
      .first().html()        // at the beginning  
    + "')")               // Using string concat to pass variable to `contains` selector)  
    .last()               // at the end (last occurence of text)
   .parent()              // invoke `parent()` to select whole row
   .css('color', 'red');  // apply css to identify the desired row.
});

详细 :(使用ECMAScript6的Set或$.unique()从名称的完整列表中删除重复项。这样，当forEach循环时代码运行结束时，它每个名称只迭代一个。）

var uniqueNames = []; 
$('tr').each(function(){
  uniqueNames.push($('td', this).first().html());  
});  // this will return the list of names from the table

// Remove duplicates from the list of names
uniqueNames = new Set(uniqueNames); // OR: uniqueNames = $.unique(uniqueNames);
uniqueNames.forEach(function(el){
  $("tr :contains('" + el + "')").last().parent().css('color', 'red');
});

查找最后一次出现的文本

5 个答案: