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

I'm working on a project about e-commercial website. I have problem with Cart section. I want to show one table if there is some goods on cart but if there is no i wanna show another table.

Here is my HTML code for tables

<div >
  <div id="dialog" title="Ürün Açıklaması">
    <p>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.</p>
  </div>
  <table id="sepettablo" align="center" >
    <tr>
      <th>Ürün</th>
      <th>Açıklama</th>
      <th>Adet</th>
      <th>Birim Fiyatı</th>
      <th>Fiyat</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</span></td>
      <td><i style="cursor:pointer;" onclick="arttir()" ></i> <input type="button" id="sonuc" value="1" /> <i onclick="azalt()" style="cursor:pointer;" ></i> <i style="cursor:pointer;" 
          onclick="urunsilme()"></i></td>
      <td>
        <span  style="cursor:default">129.99 TL</span>
      </td>
      <td>4</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</span></td>
      <td><i style="cursor:pointer;" onclick="arttir()" ></i> <input type="button" id="sonuc" value="1" /> <i onclick="azalt()" style="cursor:pointer;" ></i> <i style="cursor:pointer;" 
          onclick="urunsilme()"></i></td>
      <td>
        <span  style="cursor:default">129.99 TL</span>
      </td>
      <td>4</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.</span></td>
      <td><i style="cursor:pointer;" onclick="arttir()" ></i> <input type="button" id="sonuc" value="1" /> <i onclick="azalt()" style="cursor:pointer;" ></i> <i style="cursor:pointer;" 
          onclick="urunsilme()"></i></td>
      <td>
        <span  style="cursor:default">129.99 TL</span>
      </td>
      <td>4</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</span></td>
      <td><i style="cursor:pointer;" onclick="arttir()" ></i> <input type="button" id="sonuc" value="1" /> <i onclick="azalt()" style="cursor:pointer;" ></i> <i style="cursor:pointer;" 
          onclick="urunsilme()"></i></td>
      <td>
        <span  style="cursor:default">129.99 TL</span>
      </td>
      <td>4</td>
    </tr>
    <tr >
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>
        <td><i style="cursor:pointer;" onclick="arttir()" ></i> <input type="button" id="sonuc" value="1" /> <i onclick="azalt()" style="cursor:pointer;" ></i> <i style="cursor:pointer;" 
            onclick="urunsilme()"></i></td>
        <td>Toplam:</td>
        <td>&nbsp;</td>
    </tr>
  </table>

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

and here is my CSS codes if it's needed.

table.roundedCorners {
  border: 1px solid DarkOrange;
  border: 1px solid DarkOrange;
  border-radius: 13px;
  border-spacing: 1px;
  margin-top: 20px;
  font-size: 25px;
  width: 80%;
  max-width: 1440px;
  text-align: center;
}

table.roundedCorners tr td {
  border-bottom: 1px solid DarkOrange;
  border-top: 1px solid DarkOrange;
  border-right: 1px solid DarkOrange;
  border-left: 1px solid DarkOrange;
}

#aciklama {
  max-width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

table.roundedCorners td,
table.roundedCorners th {
  border: none;
  padding: 10px;
}

table.roundedCorners tr:last-child>td {
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
  text-align: center;
}

table.sepetbos {
  border: 1px solid DarkOrange;
  border: 1px solid DarkOrange;
  border-radius: 13px;
  border-spacing: 1px;
  margin-top: 20px;
  font-size: 25px;
  width: 80%;
  max-width: 1440px;
  text-align: center;
  /*display:none;*/
}

table.sepetbos tr:last-child>td {
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 13px;
  text-align: center;
}

table.sepetbos span {
  cursor: default;
}

table.sepetbos td,
table.sepetbos th {
  border: none;
  padding: 10px;
}

there it is. I have a function about deleting rows but it's just deleting rows. I want to disappear all table and show another table (class=sepetbos).

function about deleting rows

function urunsilme() {
  var td = event.target.parentNode;
  var tr = td.parentNode;
  tr.parentNode.removeChild(tr);
}

CodePudding user response：

Check the row count in the table, whenever you remove the row. And as soon as it is zero hide the table.

function urunsilme() {
     var td = event.target.parentNode;
     var tr = td.parentNode;
     tr.parentNode.removeChild(tr);
     var rowCount = document.querySelectorAll('#sepettablo tr');
     if(rowCount.length == 0) {
       document.querySelector('#sepettablo').style.display = "none";
       document.querySelector('.sepetbos').style.display = "table";
      }
}