Question 37269 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can i hide a whole table when row count is 0 – Jquery

i have a table in my website. It used for shopping cart section on my e-commercial site.

I asked another question about it but it not helped me at all. So i am asking another one.

Actually i want to hide my first table (id="sepettablo")
when it has no rows excluding th’s. But when i use this javascript code

    $(document).ready(function () {
    var rowCount = $("#roundedCorners td").length;
    alert(rowCount);
});

it returns me "0" output. I can’t write any code for hide it because i have to use something like this;

    const rowCount = document.getElementsByClassName("#sepettablo");
if (rowCount.length < 3 ) {
    document.querySelector('sepettablo').style.display = "none";
    document.querySelector('sepetbos').style.display = "block";
}

There is my HTML code here

<table id="sepettablo" align="center" class="roundedCorners">
            <tr>
                <th>Ürün</th>
                <th>Açıklama</th>
                <th>Adet</th>
                <th>Birim Fiyatı</th>
                <th>Fiyat (TL)</th>

            </tr>
            <tr>
                <td><img src="images5.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span class="opener" style="cursor:pointer;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
                <td>  <i onclick="azalt(),updateSubTotal()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i>  <input type="button" id="sonuc" value="0" /> <i style="cursor:pointer;" onclick="arttir(),updateSubTotal()" class="fa-solid fa-circle-plus"></i>  <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme()"></i></td>
                <td>
                    <span style="cursor:default"><input id="shop-price" type="button" name="name"  value="129" /> TL</span>
                </td>
                <td><span id="toplamid"><input type="button" name="name" value="" /></span></td>
            </tr>
            <tr>
                <td><img src="images6.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span class="opener" style="cursor:pointer;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
                <td><i onclick="azalt1(),updateSubTotal()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i>  <input type="button" id="sonuc1" value="0" /> <i style="cursor:pointer;" onclick="arttir1(),updateSubTotal()" class="fa-solid fa-circle-plus"></i>    <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme()"></i></td>
                <td>
                    <span style="cursor:default"><input id="shop-price1" type="button" name="name" value="129" /> TL</span>
                </td>
                <td><span id="toplamid1"><input type="button" name="name" value="" /></span></td>
            </tr>
            <tr>
                <td><img src="images3.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span class="opener" style="cursor:pointer;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
                <td><i onclick="azalt2(),updateSubTotal()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i>  <input type="button" id="sonuc2" value="0" /> <i style="cursor:pointer;" onclick="arttir2(),updateSubTotal()" class="fa-solid fa-circle-plus"></i>    <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme()"></i></td>
                <td>
                    <span style="cursor:default"><input id="shop-price2" type="button" name="name" value="129" /> TL</span>
                </td>
                <td><span id="toplamid2"><input type="button" name="name" value="" /></span></td>
            </tr>
            <tr>
                <td><img src="images4.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span class="opener" style="cursor:pointer;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></td>
                <td><i onclick="azalt3(),updateSubTotal()" style="cursor:pointer;" class="fa-solid fa-circle-minus"></i>  <input type="button" id="sonuc3" value="0" /> <i style="cursor:pointer;" onclick="arttir3(),updateSubTotal()" class="fa-solid fa-circle-plus"></i>    <i style="cursor:pointer;" class="fa-solid fa-trash-can" onclick="urunsilme()"></i></td>
                <td>
                    <span style="cursor:default"><input id="shop-price3" type="button" name="name" value="129" /> TL </span>
                </td>
                <td><span id="toplamid3"><input type="button" name="name" value="" /></span></td>
            </tr>
            <tr >
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>Toplam:</td>
                <td><span id="geneltoplam" ><input style="float:left;" type="button" name="name" value="" /> </span></td>
            </tr>



        </table>

        <table class="sepetbos" align="center">
            <tbody>
                <tr>
                    <td><span>Sepetiniz boş. Ürün eklemek ister misiniz?</span></td>

                </tr>
            </tbody>
        </table>
Tags:

2

Answers


  1. 0 
    // class selector => (".className")
// id selector => ("#idName")
// column count use => <td> tag
// row count use => <tr> tag

$(document).ready(function () {
    var rowCount = $(".roundedCorners tr").length;
    alert(rowCount);

    const tableRowCount = document.getElementsByClassName("#sepettablo tr");
    if (rowCount.length < 3 ) {
        document.querySelector('#sepettablo').style.display = "none";
        document.querySelector('.sepetbos').style.display = "block";
    }

});
    Login or Signup to reply.
  2. 0

    In case if you have a table without heading row, this code should work for you:
    Assuming that ".sepetbos" has display:none by default.

     $(function () {
        !$('#sepettablo tr').length && ($('#sepettablo').hide(), $('.sepetbos').show());
    });

    If you have 1st row as heading, probably you want to check if your table has more than 1 row:

    $(function () {
    $('#sepettablo tr').length <= 1 && ($('#sepettablo').hide(), $('.sepetbos').show());
});

    Hopefully this will help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search