通过 JavaScript 更改多个 HTML 表格单元格的最佳方法

Question

在 HTML 表中，我必须更改几个列标题，例如：<th class="myclass">Headline_01</th>应该变成<th class="myclass">Nice Headline 01</th>。作为 javascript 的初学者，我可以使用以下代码实现此目的：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");}这就是我所拥有的：<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>这就是我需要的：<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>我必须更改 20 多个项目，并且总是重复相同的代码对我来说似乎是错误的，我认为这也会导致性能不佳。我应该如何改进我的代码？感谢您的提示！

Answer 1

班级

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>

内容：

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>