如果返回值为空，则隐藏行

Hide a row if value returned is empty

本文关键字：隐藏 返回值 如果      更新时间：2023-09-26

我觉得问这个问题有点傻，但由于某种原因，我一辈子也想不出该怎么做我想做的事。

我有一个<div class="row">，里面有我的字段标签和字段。

如果字段的值返回为空，我想完全隐藏这一行。

HTML(保存在我的CMS系统中): 

<div id="rollNumber" class="row">
     <label class="col-sm-offset-2 col-sm-3 control-label">[!RollNumberLabel]</label>
     <div class="col-sm-2 form-control-static">[!RollNumber]</div>
</div>

视图代码:

if (newBankdetails.RollNumber != null && newBankdetails.RollNumber != "")
{
     template.Nvc.Add("[!RollNumberLabel]", "Roll number");
     template.Nvc.Add("[!RollNumber]", newBankdetails.RollNumber);
}

I tried doing:

template.Nvc.Add("[!RollNumberLabel]", "");
template.Nvc.Add("[!RollNumber]", "");

但是这会在该行上下行之间添加空白。

我对任何建议，无论是JavaScript, JQuery, CSS或如果可以做到，使用HTML(虽然我不认为它可以这样做)。

我不能添加任何代码到我的CMS，所以它需要在我的代码。

我的网站正在使用Twitter Bootstrap

您可以测试标签文本是否为空。

$(function() {
    $(".row").each(function() {
        if ($("label", this).text() == "" ) {
            $(this).hide();
        }
    });
});

工作演示: http://jsfiddle.net/m7nytbw4/

我已经为您创建了一个示例http://jsfiddle.net/gon250/x8m6jLLo/

$(".row").each(function(){
    var $row = $(this);
    var $childern = $row.children();
    if($childern.length > 1) {
     if($childern[0].innerText === "" && $childern[1].innerText === "") {
            $row.hide();
        }
    }
});

基本上我所做的是检查所有的子行如果都是空的隐藏行

希望对你有帮助!

使用CSS显示样式属性来隐藏行。

$("#rollNumber").css("display", "none");

我不确定这是否是您问题的过度解决方案，但使用jQuery和正则表达式，您可以这样做:

$('.row').each(function(){
  var row = $(this);
  if(! /^[a-zA-Z0-9]+$/.test(row.find('label'))){
    // No alphabetical characters found
    row.css('display','none');
  }
});
相关文章：