Wie kann ich ein jquery-Skript erstellen, das die Tabelle ausblendet, wenn die Tabelle leer ist?

Question

Ich habe einige CSV zu HTML-Generator. Es generiert CSV-Daten in HTML-Tabelle. Zum Beispiel

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

Manchmal sind keine Daten zu generieren. Dann sieht Tabelle so aus (es zeigt nur Header)

In diesem Fall möchte ich anstelle der Tabelle etwas Text zeigen. Sagen wir:

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

Wie kann ich das tun?

Answer 1

Sie können Anzahl der Zeilen in der Tabelle überprüfen und html ändern, wenn es leer ist.

-Code ist so etwas wie dieses:

$(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>") 
    } 
}) 

Edit: nach Pimskie Kommentar, ich geändert Code. Hier

ist ein funktionierendes Beispiel https://plnkr.co/edit/CSss8LqJ0uC5pbkoPrAu?p=preview

Answer 2

versuchen dieses Kontroll

$('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

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>

Answer 4

Setzen Sie den th in einem thead. Danach wird ein einfaches 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>'; 
} 

Demo: https://jsfiddle.net/h8y1jLca/3/

bearbeiten

, wenn Sie die th ‚s in einem thead aus irgendeinem Grund nicht vergeben können, funktioniert das auch: https://jsfiddle.net/h8y1jLca/4/