Question

我有一些CSV到html生成器。它生成CSV数据到html表。例如

 <table><tbody><tr><th>Name 1</th><th>Name 2</th></tr>
 <tr><td>123</td><td>123</td></tr>
 </tbody></table>

有时候没有数据要生成。然后表格看起来像这样（它只显示标题）

 <table><tbody><tr><th>Name 1</th><th>Name 2</th></tr>
 </tbody></table>

在这种情况下，我想显示一些文本而不是表格。让我们说：

 <h1>There is no data man!</h1>
 <p>Contact to Us</p>

我怎么能这样做？

Answer 1

您可以检查表格中的行数，如果它是空的，则更改html。

代码是这样的：

$(document).ready(function(){
    var rowCount = $('tbody > tr').length;

    if(rowCount > 1 ){ // check one more after header 
      $('table').replaceWith(" <h1>There is no data man!</h1><p>Contact to Us</p>")
    }
})

编辑：在Pimskie评论之后，我改变了代码。

以下是一个工作示例https://plnkr.co/edit/CSss8LqJ0uC5pbkoPrAu?p=preview

Answer 2

尝试此检查

   $('table').each(function(){
 var element = $(this).find('tbody tr:nth-child(2)').length;
if (element == 0) {
$(this).empty();
$(this).append(" <h1>There is no data man!</h1><p>Contact to Us</p>")
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <table><tbody><tr><th>Name 1</th><th>Name 2</th></tr>

 </tbody></table>

Answer 3

将th放在thead内。在那之后，一个简单的vanillaJS：

var table = document.querySelector('table');
var rows = document.querySelector('tbody > tr');

if (rows.length === 0) {
    table.parentNode.innerHTML = '<h1>There is no data man!</h1><p>Contact to Us</p>';
}

演示：https://jsfiddle.net/h8y1jLca/3/

修改

如果由于某种原因无法将th放在thead中，这也有效： https://jsfiddle.net/h8y1jLca/4/

Answer 4

var tbody = $("#incidents tbody");

if (tbody.children().length == 0) {
alert('There is no data man! Contact us');
   
}
else
{
alert('Table contains some data');
}

Try This One

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
<table id="incidents">
    <tbody>
        <tr><td>one</td></tr>
        <tr><td>two</td></tr>
        <tr><td>three</td></tr>
    </tbody>
</table>

</div>

当表空时，如何制作隐藏表的jquery脚本？

4 个答案: