使用JQUERY在tbody没有一行时更改CSS

Question

I want to change the css through jquery if table body doesn't have a row. How can i achieve this? Here's my approach. My problem is it doesn't work, I tried to put an alert inside the if statement but alert doesn't show up. I want to hide the table if tbody doesn't have a tr .

 $(document).ready(function() { var tbody = $(".table-condensed tbody"); if (tbody.children().length == 0) { $(".blankdata").css("display", "none"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-bordered table-condensed"> <thead> <tr> <th class="text-center blankdata">EMPLOYEE NAME</th> <th class="text-center blankdata">DESCRIPTION</th> <th class="text-center blankdata"># of Payments</th> <th class="text-center blankdata">LOAN AMOUNT</th> <th class="text-center blankdata">TOTAL PAYMENT</th> <th class="text-center blankdata">BALANCE</th> <th></th> </tr> </thead> <tbody class="table-warehouse"> <tr id="blank"> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center"></td> </tr> </tbody> </table> 

Answer 1

尝试：

if (!$('.table-condensed tbody tr').length)

Answer 2

Your code is right. All you have to do is change the condition to !== temporarily to check your css property.

Since you have a tr inside, the if condition is failing. If you remove your tr , your if condition will run fine. In this case you can temporarily change it to !== to check that.

 $(document).ready(function() { var tbody = $(".table-condensed tbody"); if (tbody.children().length !== 0) { $(".blankdata").css("display", "none"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-bordered table-condensed"> <thead> <tr> <th class="text-center blankdata">EMPLOYEE NAME</th> <th class="text-center blankdata">DESCRIPTION</th> <th class="text-center blankdata"># of Payments</th> <th class="text-center blankdata">LOAN AMOUNT</th> <th class="text-center blankdata">TOTAL PAYMENT</th> <th class="text-center blankdata">BALANCE</th> <th></th> </tr> </thead> <tbody class="table-warehouse"> <tr id="blank"> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center blankdata"></td> <td class="text-center"></td> </tr> </tbody> </table> 

Answer 3

Change if condition to

if($('.table-warehouse').html().replace(/ /g,'') == '')

JSfiddle

Answer 4

If you want to detect whether there is no <tr> tag under <tbody> , you can use find() method of Jquery:

$(document).ready(function() {
  var tbody = $(".table-condensed tbody");
  if (tbody.find("tr").length == 0) {
    $(".blankdata").css("display", "none");
  }
});

However, in your example there is a <tr> element inside <tbody> , so the length is not 0.

In addition; If there is no tag, you can not change its css of course.

Answer 5

You can do

if($(".table-condensed tr").length==0))
  $(".table-condensed tr").css("display", "none");

Answer 6

Your current markup dose not produce true condition because you have tr inside tbody that means if (tbody.children().length == 0) is false . I have checked it is really empty tbody it is working fine for me:

<table class="table table-bordered table-condensed">
  <thead>
    <tr>
      <th class="text-center blankdata">EMPLOYEE NAME</th>
      <th class="text-center blankdata">DESCRIPTION</th>
      <th class="text-center blankdata"># of Payments</th>
      <th class="text-center blankdata">LOAN AMOUNT</th>
      <th class="text-center blankdata">TOTAL PAYMENT</th>
      <th class="text-center blankdata">BALANCE</th>
      <th></th>
    </tr>
  </thead>
  <tbody class="table-warehouse">

  </tbody>
</table>

Answer 7

According to your HTML please find working code bellow

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }
    </style>
    </head>
    <body>

        <table class="table table-bordered table-condensed">
           <thead>
              <tr>
                 <th class="text-center blankdata">EMPLOYEE NAME</th>
                 <th class="text-center blankdata">DESCRIPTION</th>
                 <th class="text-center blankdata"># of Payments</th>
                 <th class="text-center blankdata">LOAN AMOUNT</th>
                 <th class="text-center blankdata">TOTAL PAYMENT</th>
                 <th class="text-center blankdata">BALANCE</th>
                 <th></th>
              </tr>
           </thead>
           <tbody class="table-warehouse">
              <tr id="blank">
                 <td class="text-center blankdata"></td>
                 <td class="text-center blankdata"></td>
                 <td class="text-center blankdata"></td>
                 <td class="text-center blankdata"></td>
                 <td class="text-center blankdata"></td>
                 <td class="text-center blankdata"></td>
                 <td class="text-center"></td>
              </tr>
           </tbody>
        </table>

    </body>

    <script type="text/javascript">
    $(document).ready(function() {
        var applyclass = true;
        var tbody = $(".table-condensed tbody");
        tbody.find('td').each(function() {
            var st = $(this).html();
            if($.trim(st) != ''){
                applyclass = false;
            }
       }) ; 
        if(applyclass){
           $(".blankdata").css("display", "none");
        }
    });  
    </script>
    </html>

I hope it will help you.

Answer 8

Put this in footer under jquery link...It generates alerts and works fine !!!

<script type="text/javascript">
    var rowCount = $('.table-condensed .table-warehouse tr').length;

    if( rowCount == 0){
        alert("no rows in tbody");
    }else{
        alert("tbody has rows");
    }
</script>