仅当td在特定html标记之后不包含内容时才隐藏tr

Question

是否可以检查tr中的内容，在html元素（br）之后查看是否存在？如果在br元素之后没有内容，我想隐藏父td。请注意，html代码是系统生成的，我无法编辑它。

我只是不确定从哪里开始。非常感谢任何帮助。

    <table class="tabledefault">
    <tbody>
        <tr>
            <td id="customfields">
                <table class="tabledefault">
                    <tbody>
                        <tr><!-- this TR should be hidden -->
                            <td id="CAT_Custom_451068"><strong>Laser Tag</strong>
                            <br>
                            </td>
                        </tr>
                        <tr>
                            <td id="CAT_Custom_451069"><strong>Arcade</strong>
                            <br>Selected
                            </td>
                        </tr>
                        <tr>
                            <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
                            <br>False
                            </td>
                        </tr>
                        <tr>
                            <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
                            <br>True</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
    </table>

Answer 1

是的，您只需获取tr，然后查看第一个<br>内的第一个<td>元素是否有任何后续元素兄弟（我在那里做出假设，你不希望那些隐藏的），或任何非空白的文本节点兄弟姐妹。 jQuery的contents很方便，因为它包含文本节点。我可能会向后循环它们：

$("#customfields .tabledefault tr").each(function(index) {
  var $tr = $(this);
  $tr.find("td:first").contents().get().reverse().some(function(node) {
    if (node.nodeName.toUpperCase() === "BR") {
      // Hide it, and we're done looping
      $tr.hide();
      return true;
    }
    if (node.nodeType != 3 || $.trim(node.nodeValue)) {
      // Don't hide it, and we're done looping
      return true;
    }
  });
});

我希望可以优化，但你明白了。

直播示例：

var counter = 3;
tick();

function tick() {
  $("#countdown").text(counter--);
  if (counter < 0) {
    hideIt();
  } else {
    setTimeout(tick, 500);
  }
}

function hideIt() {
  $("#customfields .tabledefault tr").each(function(index) {
    var $tr = $(this);
    $tr.find("td:first").contents().get().reverse().some(function(node) {
      if (node.nodeName.toUpperCase() === "BR") {
        // Hide it, and we're done looping
        $tr.hide();
        return true;
      }
      if (node.nodeType != 3 || $.trim(node.nodeValue)) {
        // Don't hide it, and we're done looping
        return true;
      }
    });
  });
}

<table class="tabledefault">
  <tbody>
    <tr>
      <td id="customfields">
        <table class="tabledefault">
          <tbody>
            <tr>
              <!-- this TR should be hidden -->
              <td id="CAT_Custom_451068"><strong>Laser Tag</strong>
                <br>
              </td>
            </tr>
            <tr>
              <td id="CAT_Custom_451069"><strong>Arcade</strong>
                <br>Selected
              </td>
            </tr>
            <tr>
              <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
                <br>False
              </td>
            </tr>
            <tr>
              <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
                <br>True</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">&nbsp;</div>

Answer 2

尝试使用.each()，nextSibling，nodeValue，String.prototype.match()，.closest()

＆＃13;

＆＃13;

$("table tr td br").each(function(i, el) {
  // if `br` next sibling does not contain alphanumeric characters,
  // hide parent `tr` element
  if (el.nextSibling.nodeType === 3 
      && el.nextSibling.nodeValue.match(/\w+/) === null
      || $(el).next(":empty").length) {
    $(this).closest("tr").hide()
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="tabledefault">
    <tbody>
        <tr>
            <td id="customfields">
                <table class="tabledefault">
                    <tbody>
                        <tr><!-- this TR should be hidden -->
                            <td id="CAT_Custom_451068"><strong>Laser Tag</strong>
                            <br><span></span>
                            </td>
                        </tr>
                        <tr>
                            <td id="CAT_Custom_451069"><strong>Arcade</strong>
                            <br>Selected
                            </td>
                        </tr>
                        <tr>
                            <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
                            <br>False
                            </td>
                        </tr>
                        <tr>
                            <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
                            <br>True</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
    </table>

＆＃13;

＆＃13;

＆＃13;