如何一键更改一个table数据标签的值

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

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

我会做的是：

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>

我做了额外的改进，就像：

创建 td-center class 而不是内联样式。
重构了你所拥有的 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。将您的代码放在一个地方，这样更容易调试并保持您的逻辑一致。

如何一键更改一个table数据标签的值

How to change value of one table data tag with one button press

html

javascript

getelementbyid