Dalam tabel HTML saya harus mengubah beberapa judul kolom, misalnya: <th class="myclass">Headline_01</th> harus menjadi <th class="myclass">Nice Headline 01</th>. Sebagai pemula dalam javascript saya bisa mencapai ini dengan kode ini:

window.onload = function() {
    'use strict';
    document.body.innerHTML = document.body.innerHTML.replace("Headline_01","Nice Headline 01");
    document.body.innerHTML = document.body.innerHTML.replace("Headline_02","Nice Headline 02");
    document.body.innerHTML = document.body.innerHTML.replace("Headline_03","Nice Headline 03");
}

Itulah yang saya miliki:

<table>
  <thead>
    <tr>
      <th class="myClass1">Current unique Headline for myClass1</th>
    </tr>
    <tr>
      <th class="myClass2">Current unique Headline for myClass2</th>
    </tr>
   ....
  </thead>

Dan itulah yang saya butuhkan:

<table>
  <thead>
    <tr>
      <th class="myClass1">New unique Headline for myClass1</th>
    </tr>
    <tr>
      <th class="myClass2">New unique Headline for myClass2</th>
    </tr>
    .....
  </thead>

Saya harus mengubah 20+ item, dan selalu mengulangi kode yang sama tampaknya salah bagi saya dan saya berasumsi itu juga mengarah pada kinerja yang buruk. Bagaimana saya harus meningkatkan kode saya? Terima kasih atas petunjuknya!

1
sdr 19 November 2020, 14:57

1 menjawab

Jawaban Terbaik

Berdasarkan kelas

const changes = { 
  "myClass1": "New unique Headline for myClass1", 
  "myClass2": "New unique Headline for myClass2" 
};

Object.keys(changes)
  .forEach(key => document.querySelectorAll("table th."+key)
    .forEach(th => th.textContent = changes[key]));
<table>
  <thead>
    <tr>
      <th class="myClass1">Current unique Headline for myClass1</th>
    </tr>
    <tr>
      <th class="myClass2">Current unique Headline for myClass2</th>
    </tr>
  </thead>

Menurut konten:

const changes = {
  "Current unique Headline for myClass1": "New unique Headline for myClass1",
  "Current unique Headline for myClass3": "New unique Headline for myClass3"
};

[...document.querySelectorAll("th")]
.forEach(th => {
  const text = changes[th.textContent];
  if (text) th.textContent = text;
});
<table>
  <thead>
    <tr>
      <th class="myClass1">Current unique Headline for myClass1</th>
    </tr>
    <tr>
      <th class="myClass2">Current unique Headline for myClass2</th>
    </tr>
    <tr>
      <th class="myClass3">Current unique Headline for myClass3</th>
    </tr>
  </thead>
0
mplungjan 19 November 2020, 18:20