如何用一个按钮按下一个表数据标签的值

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 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上都有一个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类，而不是内联的onClick事件。

我希望这能帮到你!

Answer 2

• 将所需的文本存储在data-*属性中。
• UseElement.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=""。将代码保存在一个地方，就更容易调试和保持逻辑一致。