Question

我的PHP页面上有以下Javascript代码，我将表名和变量传递给函数。＆＃34; ALL＆＃34;部分代码工作正常，在页面中解析并翻转来自“无”的所有CSS样式显示描述符。到＆＃39;＆＃39;或者回来。

我遇到的问题是＆＃34; RED＆＃34;一部分。它应该隐藏包含类的TD的所有TR＆＃34; RedCell＆＃34;但我似乎无法让这部分按预期工作。请帮忙。

JAVASCRIPT

function expandCollapseTable(tableObj, which)
{
 if (which == 'ALL')
    {
      var rowCount = tableObj.rows.length;
      for(var row=0; row<rowCount; row++)
      {
        rowObj = tableObj.rows[row];
        rowObj.style.display = (rowObj.style.display=='none') ? '' : 'none';
      }

      return;
    }

  if (which == 'RED')
    {
      $('td.RedCell').find('td.RedCell').closest('tr').style.display =  'none';
      return;
    } 

  else
    {
      return;
    }
}

CSS

.ResultTable td.RedCell{
    background-color:#FF4747;
}

HTML按钮和示例表

<input type="button" value="Show/hide ALL" onclick="expandCollapseTable(TheTable, 'ALL')" />

<input type="button" value="Hide Red" onclick="expandCollapseTable(TheTable, 'RED')" />

<table id="TheTable" class="ResultTable" style="padding: 0px; background: #FFFFFF;" align="center">
<tr><td class="RedCell">2014-07-17 10:04</td><td>1998847</td><td>137717</td></tr>
<tr><td>2014-08-06 10:44</td><td>2009211</td><td>106345</td>
<tr><td class="RedCell">2014-07-31 16:47</td><td>2006727</td><td>138438</td>

因此第一行和第三行将被隐藏，第二行将保持可见

CodePen版本的代码http://codepen.io/anon/pen/DrKLm

Answer 1

应该是：

$('td.RedCell', tableObj).closest('tr').hide();

对.find()的调用是在第一个内寻找另一个td.RedCell 。

此外，您不能将.style属性与jQuery对象一起使用，即DOM元素。要使用jQuery隐藏某些内容，请使用.hide()或.css("display", "none")。

您需要将搜索范围限制在给定的tableObj内。
顺便说一下，你为什么不在ALL选项中使用jQuery？整个循环可以替换为：

$("tr", tableObj).toggle();

Answer 2

两个问题，.find说找到td.RedCell的后代是td.RedCells。没有任何......

然后，使用.css设置样式。

所以这个：

$('td.RedCell').closest('tr').css('display', 'none');

Answer 3

使用jQuery :has选择器来过滤基于后代的元素，而不是从子节点到父节点。

$(tableObj).find('tr:has(td.RedCell)').hide();

此外，只有在没有隐藏任何单元格时，您可能还想隐藏所有单元格。如果隐藏了任何内容，您将需要显示这些内容并保持其余部分可见。这是一个例子......

var rows = $(tableObj).find('tr:gt(0)'); // Skips the first row
if(rows.is(':hidden')) {
    // Contains elements which are hidden
    rows.show();
} else {
    rows.hide();
}

结果将是：

function expandCollapseTable(tableObj, which) {
    var rows = $(tableObj).find('tr:gt(0)');
    if(which == 'RED') {
        // First snippet
        rows.has('td.RedCell').hide();
    } else if(which == 'ALL') {
        // Second snippet
        if(rows.is(':hidden')) {
            rows.show();
        } else {
            rows.hide();
        }
    }
}

http://codepen.io/anon/pen/xlmcK

额外编程糖果：

第二个代码段可以缩减为rows[rows.is(':hidden')?'show':'hide']();

当TD包含特定类时隐藏TR

3 个答案: