JavaScript/JQuery有条件地隐藏表中的行

我正在使用JQuery，并且希望根据表中某个单元格的值隐藏表中的行

我有下表：

<tr class="tr-class">
  <td class="status">
    <span class="status_submitted">submitted</span>
  </td>
</tr>
<tr class="tr-class">
  <td class="status">
    <span class="status_approved">approved</span>
  </td>
</tr>

但这会隐藏/显示所有行

问题

如何有条件地隐藏/显示行

例如，

函数hidesubmited（）

应该只隐藏状态单元格为

submited

的行

---

jshiddle

例如，函数hidesubmited（）应该只隐藏提交状态单元格的行

为此，您可以像这样更改代码

  function hideSubmitted() {
    $('.status_submitted').closest(".tr-class").hide();
  }

---

这将找到与提交的tr类最接近的tr类，并仅隐藏该类。

从您的问题中：例如，函数hidesubmited（）应该只隐藏提交状态单元格的行

为此，您可以像这样更改代码

  function hideSubmitted() {
    $('.status_submitted').closest(".tr-class").hide();
  }

---

这将找到与提交的tr类最接近的tr类，并仅隐藏该类。

使用普通javascript，您可以执行以下操作：

function toggle_by_class(cls, on) {
    var lst = document.getElementsByClassName(cls);
    for(var i = 0; i < lst.length; ++i) {
        lst[i].style.display = on ? '' : 'none';
    }
}

按类切换函数（cls，on）{
var lst=document.getElementsByClassName（cls）；
对于（变量i=0；i

使用纯javascript，您可以执行以下操作：

function toggle_by_class(cls, on) {
    var lst = document.getElementsByClassName(cls);
    for(var i = 0; i < lst.length; ++i) {
        lst[i].style.display = on ? '' : 'none';
    }
}

按类切换函数（cls，on）{
var lst=document.getElementsByClassName（cls）；
对于（变量i=0；i

您只需使用：

function showSubmitted() {
    $(".tr-class").each(function(){
        if($(this).find('.status_submitted').length > 0) $(this).show();
    });
}

function hideSubmitted() {
    $(".tr-class").each(function(){
        if($(this).find('.status_submitted').length > 0) $(this).hide();
    });
}

如果您想减少代码，可以执行以下操作：

function showTr(type) {
    $(".tr-class").each(function(){
        if($(this).find('.status_'+type).length > 0) $(this).show();
    });
}

function hideTr(type) {
    $(".tr-class").each(function(){
        if($(this).find('.status_'+type).length > 0) $(this).hide();
    });
}

showTr('approved');
showTr('submitted');

您可以简单地使用：

function showSubmitted() {
    $(".tr-class").each(function(){
        if($(this).find('.status_submitted').length > 0) $(this).show();
    });
}

function hideSubmitted() {
    $(".tr-class").each(function(){
        if($(this).find('.status_submitted').length > 0) $(this).hide();
    });
}

如果您想减少代码，可以执行以下操作：

function showTr(type) {
    $(".tr-class").each(function(){
        if($(this).find('.status_'+type).length > 0) $(this).show();
    });
}

function hideTr(type) {
    $(".tr-class").each(function(){
        if($(this).find('.status_'+type).length > 0) $(this).hide();
    });
}

showTr('approved');
showTr('submitted');

---

我想您正在寻找文本搜索，答案是Jquerycontains：

function showSubmitted() {
   $(".tr-class:contains(submitted)").show();
}
function hideSubmitted() {
   $(".tr-class:contains(submitted)").hide();
}

---

我想您正在寻找文本搜索，答案是Jquerycontains：

function showSubmitted() {
   $(".tr-class:contains(submitted)").show();
}
function hideSubmitted() {
   $(".tr-class:contains(submitted)").hide();
}

---

您使用的class=tr类忽略了所有其他id。您需要为每一行使用更为特殊的内容。@Richard>$（“.status\u submitted”）.parent（）.parent（）.hide（）；应该可以。您使用的class=tr类忽略了所有其他id。您需要为每一行使用更为特殊的内容。@Richard>$（“.status\u submitted”）.parent（）.parent（）.hide（）；应该有用。