如何获取表格中的单元格值并将其显示在文本框中

Question

我有一张这样的表：

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>123</td>
    <td>A</td>
  </tr>
  <tr>
    <td>456</td>
    <td>B</td>
  </tr>
  <tr>
    <td>789</td>
    <td>C</td>
  </tr>
</table>
<form>
    <input type="text" name="txtDsCode" id="txtDsCode"/>
</form>

当我点击textbox然后点击表格中的cell时，该单元格的值将显示在textbox中。 我该怎么做javascript？ 谢谢大家！

Answer 1

• 使用querySelectorAll选择td元素
• 使用Array.from将array-like-object投射到array以应用array方法
• 使用addEventListener
注册活动

var cells = document.querySelectorAll('#mytable td');
Array.from(cells).forEach(function(elem) {
  elem.addEventListener('click', function() {
    document.getElementById('txtDsCode').value = this.textContent;
  })
})

<table id="mytable">
  <tr>
    <th>Customer Id</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>123</td>
    <td>A</td>
  </tr>
  <tr>
    <td>456</td>
    <td>B</td>
  </tr>
  <tr>
    <td>789</td>
    <td>C</td>
  </tr>
</table>
<form>
  <input type="text" name="txtDsCode" id="txtDsCode" />
</form>