如果子单元格包含特定值,则将类应用于父行

时间:2013-06-21 20:30:06

标签: javascript jquery css wordpress

问题

如果某个值出现在任何子单元格中,我想隐藏一行。

期望效果

  • 如果其中一个子单元格包含特定值
  • ,则将类应用于行
  • 奖励挑战:隐藏包含该值的列,即“admin-hide”

示例代码

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

为什么?

对于包含需要的信息的表非常有用:

  • 在不丢失后端数据的情况下打开/关闭,即成员名单, 已失效的成员行具有display:none;
  • 突出显示特定行,即高级赞助商

我遇到的困难

隐藏专栏是有问题的。如果有必要,我可以坚持使用包含字符串的子元素隐藏行。

Tech我正在工作

  • Wordpress 3.5.1
  • Jquery 1.10.1
  • Tablepress Pluging(使用Jquery的DataTables插件)

尝试#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>

4 个答案:

答案 0 :(得分:2)

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();
});

答案 1 :(得分:1)

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');
});

答案 2 :(得分:0)

这样的东西?

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

using oTable

manually hiding visibility

using hide() works fine - 我不知道为什么会弄乱你的排序

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

答案 3 :(得分:-1)

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