Aynısını birde ajax ile uygulayalım buda her 10 saniyede bir güncelleme yaparak yeni olabilecek verileri sayfa yenileme yapmadan getirecektir. Biraz daha güncelleme yaparak daha cici hale getirdim.

<table id="depremTablosu">
  <thead>
    <tr>
      <th>TARİH/SAAT</th>
      <th>DERİNLİK (km)</th>
      <th>BÜYÜKLÜK</th>
      <th>ŞEHİR</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

<script>
  function tarihCevir(tarih) {
    var aylar = {
      'January': 'Ocak',
      'February': 'Şubat',
      'March': 'Mart',
      'April': 'Nisan',
      'May': 'Mayıs',
      'June': 'Haziran',
      'July': 'Temmuz',
      'August': 'Ağustos',
      'September': 'Eylül',
      'October': 'Ekim',
      'November': 'Kasım',
      'December': 'Aralık'
    };
    return tarih.replace(/([A-Za-z]+) (\d+), (\d+)/, function (match, ay, gun, yil) {
      return gun + ' ' + aylar[ay] + ' ' + yil;
    });
  }

  function appendCSS(css) {
    var styleElement = document.createElement("style");
    styleElement.appendChild(document.createTextNode(css));
    document.head.appendChild(styleElement);
  }

  var sonDepremTarih = null; // Son deprem tarihi

  function formatDerinlik(derinlik) {
    if (derinlik >= 1) {
      return derinlik + ' km';
    } else {
      return (derinlik * 1000) + ' m';
    }
  }

  function formatBuyukluk(buyukluk) {
    if (buyukluk <= 3) {
      return '<span class="buyukluk-yesil"><i class="fas fa-arrow-down"></i>&nbsp;' + buyukluk + '</span>';
    } else if (buyukluk <= 5) {
      return '<span class="buyukluk-turuncu"><i class="fas fa-exclamation"></i>&nbsp;' + buyukluk + '</span>';
    } else {
      return '<span class="buyukluk-kirmizi"><i class="fas fa-arrow-up"></i>&nbsp;' + buyukluk + '</span>';
    }
  }

  function verileriGuncelle() {
    fetch('https://api.orhanaydogdu.com.tr/deprem/live.php')
      .then(response => response.json())
      .then(data => {
        var depremler = data.result;
        var tablo = document.getElementById('depremTablosu');

        if (depremler.length > 0) {
          var sonDeprem = depremler[0];
          var tarih = tarihCevir(sonDeprem.date);

          if (sonDepremTarih !== tarih) {
            // Yeni bir veri var, tabloya uyarı ekle
            sonDepremTarih = tarih;

            var uyariSatiri = '<tr><td colspan="4">Yeni bir veri geldi!</td></tr>';
            var tbody = tablo.getElementsByTagName('tbody')[0];
            tbody.insertAdjacentHTML('afterbegin', uyariSatiri);
          }

          var tabloHTML = '';
          depremler.slice(0, 15).forEach(function(deprem) {
            var tarih = tarihCevir(deprem.date);
            var derinlik = formatDerinlik(deprem.depth);
            var buyukluk = formatBuyukluk(deprem.mag);
            var row = '<tr><td class="tarih">' + tarih + '</td><td class="derinlik">' + derinlik + '</td><td class="buyukluk">' + buyukluk + '</td><td class="yer">' + deprem.title + '</td></tr>';
            tabloHTML += row;
          });

          tablo.getElementsByTagName('tbody')[0].innerHTML = tabloHTML;
        }
      })
      .catch(error => {
        console.log('Veri alınırken bir hata oluştu: ', error);
      });
  }

  // İlk veri yükleme
  verileriGuncelle();

  // 3 saniyede bir veri güncelleme
  setInterval(function () {
    verileriGuncelle();
  }, 10000);

var css = "table { width: 60%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 14px; } th:nth-child(4), td:nth-child(4) { text-align: left; } .tarih { width: 200px; text-align: center; } .derinlik { width: 120px; text-align: center; } .buyukluk { width: 80px; text-align: center; } .buyukluk-yesil { color: green; font-weight: bold; } .buyukluk-turuncu { color: orange; font-weight: bold; } .buyukluk-kirmizi { color: red; font-weight: bold; }";
  appendCSS(css);
</script>