1

如果前面的输入框的值相同，我试图隐藏一个输入框，例如

City     Id    Name

NY        1     James
NY        2     John
TOKYO     3     Jane
TOKYO     4     June

我想隐藏第二个 NY 和第二个 TOKYO（注意：只有城市，ID 和名称应该保留）。

我正在使用下面的 jQuery 脚本：

<script>

$(function(){

var tr_no = $('.city').length;

for(i=1; i<=tr_no; i++)  {

    if($(".city:eq("+i+")").val() == $(".city:eq("+i+++")").val()){

        $(".city:eq("+i+1+")").css({'display':'none'});

        }

    }


});

</script>

它不工作。Firebug 控制台不返回任何错误。任何有关如何在 jQuery 上继续此操作的帮助将不胜感激。

4

6 回答 6

3

像这样的东西应该用空格替换重复的城市名称：http: //jsfiddle.net/S2UNH/7/

var prev = "";  // cache previous value
$('#data').find("td.city").each(function() {
    var val = $(this).text().trim();
    if (val == prev) { // same value, blank it
        $(this).text(" ");
    } else {           // new value, store it
        prev = val; 
    }
});

这与迄今为止发布的其他一些方法有何不同：

  • 如果城市不需要提前知道的列表
  • 只要前面有不同的城市，城市名称就可以再次出现在列表的下方。例如，请参阅http://jsfiddle.net/S2UNH/8/。如果 NY 后面的所有条目无论出现在哪里都被隐藏，那么观众可能会将其误认为是 TOKYO 条目。

如果您确实想隐藏重复的值而不是替换它们，那么您需要将文本放在另一个元素中，因为隐藏<td>标签会弄乱您的布局。

有多种方法可以实现这一目标；这是一种方法：http: //jsfiddle.net/S2UNH/9/

于 2012-08-15T08:21:21.817 回答
2

对于有组织的输出：http: //jsfiddle.net/mattblancarte/mnWH2/10/

var tr = $( 'tr' ),
    duplicates = [];

tr.each( function( k,v ){
  var elem = $( v ),
      child = elem.children().slice(0,1),
      city = child.text();

  if( $.inArray( city, duplicates ) > 0 ){
    child.empty();    
  } else {
    duplicates.push( city );
  }
});

对于无组织的输出：http: //jsfiddle.net/mattblancarte/mnWH2/8/

$( 'tr' ).each( function( k,v ){
  var elem = $( v ),
      prev = elem.prev().children().slice(0,1).text(),
      child = elem.children().slice(0,1),
      city = child.text();

  if( prev === city ){
    child.empty();    
  } 
});

​</p>

注意:: 我不认为你想使用 display:none;。这可能会改变表格......也许 visibility:hidden 会是一个更好的选择。我只是清空单元格。

于 2012-08-15T08:28:24.110 回答
2

如果这是您的数据结构：

<table>
    <thead>
        <tr>
            <th class="city"><span>City</span></th>
            <th class="id"  ><span>Id  </span></th>
            <th class="name"><span>Name</span></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="city"><span>NY</span></td>
            <td class="id"  ><span>1</span></td>
            <td class="name"><span>James</span></td>
        </tr>
        <tr>
            <td class="city"><span>NY</span></td>   
            <td class="id"  ><span>2</span></td>     
            <td class="name"><span>John</span></td>
        </tr>
        <tr>
            <td class="city"><span>TOKYO</span></td>        
            <td class="id"  ><span>3</span></td>     
            <td class="name"><span>Jane</span></td>
        </tr>
        <tr>
            <td class="city"><span>TOKYO</span></td>     
            <td class="id"  ><span>4</span></td>     
            <td class="name"><span>June</span></td>
        </tr>
        </tr>
    </tbody>
</table>
​

然后这段代码有效：

var tr_no = $('.city').length;
for(i=0; i<tr_no; i++)  {
    if($(".city span").eq(i).text() == $(".city span").eq(i+1).text()){
        $(".city span").eq(i+1).css({'display':'none'});
    }
}

===

我在提琴手中编码了答案，因为它更容易验证：

http://jsfiddle.net/ewC6q/10/

于 2012-08-15T08:29:26.933 回答
1

我们只能假设您处理的是在 html 表中编码的数据。如果是这样，则可能是您将字符串作为表格单元格的内容：

<td class="city">NY</td>

在表格单元格上使用 css 规则并不总是按预期工作，表格有些特殊。您必须将内容分别包装在一个容器中，可能是这样的：

<td><span class="city">NY</span></td>

不确定这是否真的是您的问题，因为您的问题有些模糊。

于 2012-08-15T07:52:28.217 回答
1

您可以使用:containsjQuery 选择器来选择包含指定文本的所有元素。

试试这个代码：

        // Storing the unique city names in an array
        var arrCity = {};
        $('table tr:gt(0) td:first-child').each(function () {
           arrCity[$(this).text()] = $(this).text(); 
        });

        // Removing the second city name for each cities
        $.each(arrCity, function (key, value) {
           $('table tr td:contains("' + value + '"):eq(1)').html('');
        });

演示：http: //jsfiddle.net/codef0rmer/mnWH2/

于 2012-08-15T07:58:56.700 回答
1

我假设每个 tr 都有一个类“城市”，

$(function () {
    var prevCity = ''
    $('.city').each(function(){
        currCity = $(this).find('td:first').html().trim();
        if(currCity === prevCity)
        {
            $(this).css('display', 'none');
        }
        prevCity =  currCity;      
    });
});
于 2012-08-15T08:31:37.717 回答