如何从 JavaScript 中的元素列表填充表单字段？

Question

我有一个梦幻足球项目，我在 Django 中构建了一个生成 HTML 元素列表的项目。像这样……

<tbody id="page1">
        {% for q in QBpage %}
        <tr>
            <td><h6 id="qbname">{{ q.player_name }}</h6></td>
            <td><button onclick="selectPlayer()" type="button" id="qbackbutton" class="btn btn-success btn-sm m-0 waves-effect" data-player-name="{{ q.player_name }}" data-position="{{ q.position }}">Add</button></td>
            <td><h6> {{ q.team }} </h6></td>
            <td><h6> {{ q.position }}  </h6></td>
            <td><h6>{{ q.points }}</h6></td>
        </tr>
        {% endfor %}
</tbody>

这是从 API 中提取的球员列表（所有四分卫）。我要做的是从每个玩家对应的“添加”按钮，将该玩家的名字添加到也在同一页面上的表单字段中。我可以使用这个 JavaScript 函数来做到这一点...

function selectPlayer (){
    let d = document.getElementById("qbname");
    document.getElementById("QB_name").value = document.getElementById("qbname").innerHTML;
}

但问题是，我只能得到列表中第一个玩家的名字，因为所有玩家最终都有相同的 id。因此，您只能检索第一个元素。即使我单击列表下方的玩家，第一个玩家的名字也是唯一返回的名字。分配一个类是行不通的，因为据我所知，你只能“getElementsByClass”，所以你最终会检索到列表中的所有成员，而不仅仅是一个。

我将如何解决这个问题？我很确定我完全想多了，而且有一个简单的解决方案，我只是因为多年来一直在煎熬这个问题而没有看到。任何建议表示赞赏。

Answer 1

如果您在按钮内将该值作为数据属性，您可以简单地使用this.getAttribute("attrname") 或使用el.closest("tr").children[0].textContent，其中children[0] 代表第一个td。

演示代码：

function selectPlayer(el) {
  document.getElementById("QB_name").value = el.getAttribute("data-player-name")
  //or 
  console.log(el.closest("tr").children[0].textContent.trim())
  //or
  console.log(el.closest("tr").querySelector(".qbname").textContent.trim())
}

<table>
  <tbody id="page1">

    <tr>
      <td>
        <h6 class="qbname">abc</h6>
      </td>
      <!--pass this-->
      <td><button onclick="selectPlayer(this)" type="button" id="qbackbutton" class="btn btn-success btn-sm m-0 waves-effect" data-player-name="abs" data-position="{{ q.position }}">Add</button></td>
      <td>
        <h6> {{ q.team }} </h6>
      </td>
      <td>
        <h6> {{ q.position }} </h6>
      </td>
      <td>
        <h6>{{ q.points }}</h6>
      </td>
    </tr>
    <tr>
      <td>
        <h6 class="qbname">abc2</h6>
      </td>
      <!--pass this-->
      <td><button onclick="selectPlayer(this)" type="button" id="qbackbutton" class="btn btn-success btn-sm m-0 waves-effect" data-player-name="abs2" data-position="{{ q.position }}">Add</button></td>
      <td>
        <h6> {{ q.team }} </h6>
      </td>
      <td>
        <h6> {{ q.position }} </h6>
      </td>
      <td>
        <h6>{{ q.points }}</h6>
      </td>
    </tr>

  </tbody>
</table>
<input type="text" id="QB_name">