如何用JavaScript从元素列表取值填充表单字段？Django项目实操问题

你不需要额外遍历DOM获取球员姓名，已经在按钮的data-player-name自定义属性中存储了当前球员的姓名，直接调用该属性即可，修改步骤如下：

步骤1：修改模板中的按钮点击事件，传入当前点击的按钮对象 #

把按钮的onclick属性修改为：

<button onclick="selectPlayer(this)" type="button" class="btn btn-success btn-sm m-0 waves-effect" data-player-name="{{ q.player_name }}" data-position="{{ q.position }}">Add</button>

注意：HTML中id属性必须全局唯一，你可以把循环生成的重复id qbname、qbackbutton都删掉，避免后续出现其他DOM选择异常

步骤2：修改JavaScript函数，从传入的按钮对象中提取球员名 #

function selectPlayer(clickedBtn) {
    // 直接从按钮的dataset中取出预存的球员姓名
    const playerName = clickedBtn.dataset.playerName;
    // 赋值给表单字段
    document.getElementById("QB_name").value = playerName;
}

备选方案（无data属性场景） #

如果你不想用data属性，也可以通过DOM层级查找对应球员名，不受data属性是否存在的影响：

function selectPlayer(clickedBtn) {
    // 找到按钮所属的<tr>行元素
    const playerRow = clickedBtn.closest('tr');
    // 找到行内第一个td里的h6元素，获取文本内容
    const playerName = playerRow.querySelector('td:first-child h6').textContent.trim();
    document.getElementById("QB_name").value = playerName;
}

内容的提问来源于stack exchange，提问作者user14593966