如何切换跨度的可见性取决于tbody的内容

Question

我使用表来填充tbody中的数据，我也显示了一个范围。 数据是使用Javascript动态传输的。依赖性是这样的：

如果tbody为空：显示SPAN

如果有人有数据：隐藏SPAN

// HTML代码

<table id="incidents">
    <tbody>
    </tbody>
</table>
<br />
<button onclick="func()">Check table</button>
<br />

<span class="abc">Drop your files here to upload</span>

// Jquery代码

function func() {
var tbody = $("#incidents tbody");

if (tbody.children().length != 0) {
      $('.abc').css('display','none');
    }
}

Answer 1

使用trim作为附加检查

function func() {
  var contentLen = $.trim($("#incidents tbody").children()).length;

  if (contentLen == 0) {
   $('.abc').css('display','none');
  } else {
   $('.abc').css('display','block');
  }    
}

Answer 2

试试这个

if($("#incidents tbody").children().length > 0)
{
  $('.abc').css('display','none');
} 
else 
{
  $('.abc').css('display','block');
}

Answer 3

＆＃13;

＆＃13;

function func() {
  var tbody = $("#incidents tbody");

  if (tbody.children().length == 0) {
    $('.abc').removeClass('hide');
  }
}

＆＃13;

.hide {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="incidents">
  <tbody>
  </tbody>
</table>
<br />
<button onclick="func()">Check table</button>
<br />

<span class="abc hide">Drop your files here to upload</span>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

function func() {
  var tbody = $("#incidents tbody");

  if (tbody.children().length == 0) {
    $('.abc').removeClass('hide');
  }
}

＆＃13;

.hide {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="incidents">
  <tbody>
    <tr><td>asd</td></tr>
  </tbody>
</table>
<br />
<button onclick="func()">Check table</button>
<br />

<span class="abc hide">Drop your files here to upload</span>

＆＃13;

＆＃13;

＆＃13;

1. 检查tbody儿童的长度是否= = 0
2. 更好地添加/删除类而不是直接使用jquery / js
放置css