How can i hide a whole table when row count is 0-CodePudding

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" >
            <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="images\5.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span  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;" ></i>  <input type="button" id="sonuc" value="0" /> <i style="cursor:pointer;" onclick="arttir(),updateSubTotal()" ></i>  <i style="cursor:pointer;"  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="images\6.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span  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;" ></i>  <input type="button" id="sonuc1" value="0" /> <i style="cursor:pointer;" onclick="arttir1(),updateSubTotal()" ></i>    <i style="cursor:pointer;"  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="images\3.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span  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;" ></i>  <input type="button" id="sonuc2" value="0" /> <i style="cursor:pointer;" onclick="arttir2(),updateSubTotal()" ></i>    <i style="cursor:pointer;"  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="images\4.jpg" style="height:100px;" alt="Alternate Text" /></td>
                <td id="aciklama"><span  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;" ></i>  <input type="button" id="sonuc3" value="0" /> <i style="cursor:pointer;" onclick="arttir3(),updateSubTotal()" ></i>    <i style="cursor:pointer;"  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  align="center">
            <tbody>
                <tr>
                    <td><span>Sepetiniz boş. Ürün eklemek ister misiniz?</span></td>

                </tr>
            </tbody>
        </table>

CodePudding user response：

// 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";
    }

});

CodePudding user response：

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