如何通过一键更改一个表数据标签的值

Question

这是我的JS代码，我想做的是单击带有id="tg-13"的按钮，只是在td中显示13。但是，当我单击"tg-13"按钮时，实际上会发生什么，所有数字都会出现。我该如何解决？

 <tr onclick="aparecer()">
    <td class="tg-kpoh" style="text-align: center;">J</td>
    <td id="tg-13" style="text-align: center;"><button>?</button></td>
    <td id="tg-10" style="text-align: center;"><button>?</button></td>
    <td id="tg-45" style="text-align: center;"><button>?</button></td>
    <td id="tg-47" style="text-align: center;"><button>?</button></td>
    <td id="tg-35" style="text-align: center;"><button>?</button></td>
  </tr>

功能-aparaecer（）

function aparecer() {

    document.getElementById("tg-13").innerHTML = "13";

    document.getElementById("tg-10").innerHTML = "10";

    document.getElementById("tg-45").innerHTML = "45";  

    document.getElementById("tg-47").innerHTML = "47";

    document.getElementById("tg-35").innerHTML =  "35";

}   

Answer 1

问题是，在整行，click而不是每个td上都有一个tr事件。

我将执行以下操作：

const onClick = (e) => {
  const currentId = e.id;
  e.innerHTML = currentId.replace('tg-', '');
}

.td-center {
  text-align: center;
}

<table>
  <tr>
    <td class="tg-kpoh td-center">J</td>
    <td id="tg-13" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-10" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-45" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-47" class="td-center" onclick="onClick(this)"><button>?</button></td>
    <td id="tg-35" class="td-center" onclick="onClick(this)"><button>?</button></td>
  </tr>
</table>

我做了其他改进，就像：

1. 创建了td-center类，而不是内联样式。
2. 重构了onClick事件的内容。

我希望这会有所帮助！

Answer 2

• 将所需的文本存储在data-*属性中。
• 使用Element.addEventListener()

const btns = document.querySelectorAll("[data-text]");
const setText = ev => ev.currentTarget.textContent = ev.currentTarget.dataset.text
btns.forEach(el => el.addEventListener('click', setText));

<table>
  <tr>
    <td>J</td>
    <td><button data-text="13">?</button></td>
    <td><button data-text="10">?</button></td>
    <td><button data-text="45">?</button></td>
    <td><button data-text="47">?</button></td>
    <td><button data-text="35">?</button></td>
  </tr>
</table>

避免使用事件处理程序onclick=""之类的内联JavaScript。将您的代码放在一个地方，可以更轻松地进行调试并使逻辑保持一致。