使用双击表更改文本框值

Question

双击表格行后，我需要更改表单中的值。当我双击表格的一行时，将ID和名称放在相应的输入文本中。我不知道该怎么做。

<input type="text" id="itemID">
<input type="text" id="itemName">

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>NAME</th>
    </tr>
  </thead>
  <tbody>
    <tr id="dblClick">
      <td>1</td>
      <td>Jace</td>
    </tr>
    <tr id="dblClick">
      <td>2</td>
      <td>Jennifer</td>
    </tr>
  </tbody>
</table>

Answer 1

使用Jq可以用更少的代码来完成。

在这里我仅用js制作了一个示例。

var itemId = document.getElementById("itemID");

var itemName = document.getElementById("itemName");

var tr = document.getElementsByClassName("dblClick");
for(var i = 0; i< tr.length; i++){
 let item = tr[i]
 item.addEventListener("dblclick", ()=> {
    itemId.value = item.children[0].innerHTML
    itemName.value = item.children[1].innerHTML

  });
 }

<input type="text" id="itemID">
<input type="text" id="itemName">

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>NAME</th>
    </tr>
  </thead>
  <tbody>
    <tr class="dblClick">
      <td>1</td>
      <td>Jace</td>
    </tr>
    <tr class="dblClick">
      <td>2</td>
      <td>Jennifer</td>
    </tr>
  </tbody>
</table>