如果子單元格包含特定值，則將類應用於父行

Question

問題

如果某個值出現在其任何子單元格中，我想隱藏一行。

所需效果

• 如果其子單元格之一包含特定值，則將類應用於行
• 額外挑戰：隱藏包含該值的列，即“ admin-hide”

范例程式碼

$('tr').each(function(){
if($('td:contains("non-member")', this).length{       
$(this).addClass('disabled');
}
});

為什么？

對於包含以下信息的表而言，這是非常寶貴的：

• 在不丟失后端數據（即成員花名冊）的情況下打開/關閉，失效的成員行顯示：無；
• 突出顯示特定行，即高級贊助商

我遇到的困難

隱藏列是有問題的。 如有必要，我可以堅持只隱藏帶有包含字符串的子元素的行。

我正在使用的技術

• WordPress的3.5.1
• jQuery 1.10.1
• Tablepress插入（將DataTables插件用於Jquery）

嘗試＃1

這就是我在WordPress中的頁面編輯器中所擁有的：

[table id=3 /]
<script>jQuery(function($) {
$('#tableID tr').filter(function() {
$('td', this).each(function() {
if ($(this).text().indexOf('admin-hide') != -1)
$('#tableID tr td:eq('+ $(this).index() +')').hide();
});

return $(this).text().indexOf('non-member') != -1;
}).addClass('disabled');
});</script>
<style>
.disabled {display: none;}
</style>

嘗試＃2-@adeneo

這會隱藏行，但會破壞Datatables / Tablepress：

<script> jQuery(function($) {
$('#tablepress-3 tr:contains("admin-hide")').addClass('disable-cells')
var index = $('td:contains("admin-hide")').index();
$('th,td', '#tablepress-3').filter('nth-child('+(index+1)+')').addClass('disable-cells'); });
</script>
<style>
.disable-cells {display: none;}
</style>

嘗試＃3-@SpenserJ

這隱藏了行，允許使用數據表。 但是，它不會隱藏該列。

<script>
jQuery(function($) {
$('#tablepress-3 td').each(function() {
if ($(this).text().indexOf('admin-hide') !== -1) {
// Hide the column without affecting the table formatting
$(this).css('visibility', 'hidden');
}
});
// Hide the entire row
$('#tablepress-3 tr:contains("admin-hide")').hide();
});
</script>

Answer 1

http://codepen.io/SpenserJ/pen/GqviI

jQuery(function($) {
  $table = $('#tablepress-3');
  $('th, td', $table).each(function() {
    if ($(this).text().indexOf('Admin Only') !== -1) {
      var index = $(this).index();
      $('th:eq(' + index + '), td:eq(' + index + ')', 'tr', $table).hide();
    }
  });
  // Hide the entire row
  $('tr:contains("Membership Expired")', $table).hide();
});

Answer 2

jQuery(function($) {
    $('#tableID tr').filter(function() {
        $('td', this).each(function() {
            if ($(this).text().indexOf('admin-hide') != -1)
                $('#tableID tr td:eq('+ $(this).index() +')').hide();
        });

        return $(this).text().indexOf('non-member') != -1;
    }).addClass('disabled');
});

Answer 3

像這樣嗎

// tr that contains the specific word - add class to
$('#tableid tr:contains("specific word")').addClass('yourclass');
// get column index of admin-hide
var index = $('#tableid td:contains("admin-hide")').index();
// and hide all th/tr in that column    
// this is assuming when you initialized datatables you named it oTable as in var oTable = $('table').datatables()
oTable.fnSetColumnVis( index, false ); // for datatables

// or if you want to manually hide them
$('th,td', '#tableid').filter(':nth-child('+(index+1)+')').css('visibility','hidden');

如果您使用的是dataTables，則可以像下面的示例一樣設置可見性。 還要刪除+1，因為該方法的索引也是基於0的-http: //www.datatables.net/examples/api/show_hide.html

使用oTable

手動隱藏可見性

使用hide（）可以正常工作 -我不知道為什么它弄亂了您的排序

$('th,td', '#tablepress-demo').filter(':nth-child(' + (index + 1) + ')').hide()

Answer 4

$('table .classForRowThatCouldBeHidden').find('.someClassForHiddenValue').parent().hide();