2015-11-05 48 views
1

我試圖獲得一個表來顯示只有具有與數組的值之一相匹配的td的行。jQuery/Javascript - 只顯示tr與td的匹配數組

我已經創建了一個愚蠢的代碼的特定部分jsfiddle。我不知道爲什麼這不起作用,所以將不勝感激。

不起作用的部分顯然是找到與數組值td's匹配的部分。

下面是代碼:

 $('body').on('click', '#zipButton', function() { 
        var arrayTest = [123,124,125,126] 
        var tr = find('tbody > tr'); 
        $(tr).hide(); 
          for(i=0;i<arrayTest.length;i++) { 
          $('.zipTd').each(function() { 
           ($(this).text() == arrayTest[i].toString()) ? $(this).parent().show() : $(this).parent().hide(); 
          }); 
          }; 
     }); 

http://jsfiddle.net/m4orLpd3/1/

感謝

+0

在我看來,你應該嘗試爲創建要顯示的唯一匹配元素的新數組。然後執行搜索並添加元素。之後,顯示新的數組:) –

+0

不幸的是,這是行不通的,因爲這是一個愚蠢的版本。原來甚至沒有顯示他們被過濾的數字,它的工作列表表。但是,謝謝:) – Romtim

回答

0

您可以嘗試使用jQuery的.filter和JavaScript Array.prototype.filter做到這一點。

檢查下面的例子:

var array = [123, 124, 125, 126]; 
 

 
$('body').on('click', 'button', function() { 
 

 
    var filter = function() { 
 

 
    var match = false; 
 

 
    $(this).find('td').each(function() { 
 

 
     var currentText = $(this).text(); 
 

 
     var filtered = array.filter(function(value) { 
 
     return value == currentText; 
 
     }); 
 

 
     if (filtered.length > 0) { 
 
     match = true; 
 
     } 
 

 
    }); 
 

 
    return match; 
 

 
    }; 
 

 
    $('tr').hide().filter(filter).show(); 
 

 
});
td { 
 
    border: 1px solid #000; 
 
    padding: 5px 10px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button type="button">trigger</button> 
 

 
<table> 
 
    <tr> 
 
    <td>123</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>124</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>127</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>123</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>324</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>127</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>523</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>144</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>127</td> 
 
    <td>dummy</td> 
 
    </tr> 
 
</table>

+0

謝謝!這完美的作品,不會加載客戶端太多:) – Romtim

0

您可以使用過濾器這個

$('body').on('click', '#zipButton', function() { 
    var arrayTest = [123, 124, 125, 126] 
    $(".zipTd").filter(function() { 
     return arrayTest.indexOf(parseInt($(this).text().trim())) == -1 
    }).closest("tr").hide(); 
}); 

Fiddle

編輯

$('body').on('click', '#zipButton', function() { 
    $(".zipTd").closest("tr").hide(); 
    var arrayTest = [123, 124, 125, 126] 
    $(".zipTd").filter(function() { 
     return arrayTest.indexOf(parseInt($(this).text().trim())) >= 0 
    }).closest("tr").show(); 
}); 

Edited Fiddle

+0

謝謝,但這與需要的相反。它隱藏了我需要顯示的值,並顯示了我需要隱藏的值。 – Romtim

+0

查看新編輯.. –

+0

謝謝,現在有點作品了。唯一的問題是,現在它將瀏覽器掛起10秒鐘,而您之前的代碼花費了一兩秒鐘時間,是否有一個特定的原因,爲什麼現在需要永久?對於您的信息,我的表中的行數大約爲2500 – Romtim