如何从 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。因此，您只能检索第一个元素。即使我点击列表下方的玩家，第一个玩家的名字也是唯一返回的名字。分配 class 是行不通的，因为据我所知，您只能“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">

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

How can I populate a form field from a list of elements in JavaScript?

javascript

django

dom

dom-events