1

前の入力ボックスの値が同じ場合、入力ボックスを非表示にしようとしています。

City     Id    Name

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

2 番目の NY と 2 番目の 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>タグを非表示にするとレイアウトが乱れるため、テキストを別の要素内に配置する必要があります。

これを実現するにはさまざまな方法があります。ここに1つのアプローチがあります：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

:contains指定されたテキストを含むすべての要素を選択するjQueryセレクターを使用できます。

このコードを試してください：

        // 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

html テーブルにコード化されたデータで作業していると想定することしかできません。もしそうなら、表のセルの内容として文字列を持っている可能性があります:

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

テーブル セルで CSS ルールを使用しても、常に期待どおりに機能するとは限りません。テーブルは多少特殊です。おそらく次のように、コンテンツをそれぞれコンテナにラップする必要があります。

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

ただし、質問がやや曖昧であるため、これが実際に問題であるかどうかはわかりません。

于 2012-08-15T07:52:28.217 に答える
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 に答える