如何通過一鍵更改一個表格數據標簽的值

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>

Function - 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事件，在tr上而不是在每個 td 上。

我會做的是以下幾點：

 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 class 而不是內聯樣式。
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>

避免使用內聯 JavaScript ，例如事件處理程序onclick="" 。 將您的代碼保存在一個地方，更容易調試並保持邏輯一致。