根据select(Javascript和Flask)设置td的值

Question

很抱歉我的英语不好。我刚开始使用Javascript和Flask，但我正在尝试开发一个应用程序来管理银行经理之间的客户转移。

到目前为止，我怀疑已经创建了一个经理投资组合的公司表，在这个表中，上级可以选择将收到账户的经理。在这一点上，当选择新经理时，我创建了一个javascript函数来检查公司是否在新地点有账户。该函数正在工作，但仅适用于第一行！！！

这是js脚本

<script>
let destino_selec = document.getElementById("{{ row['ID_ROW_GRTE'] }}");
let destino_cc = document.getElementById("cc_dest_{{ row['ID_ROW_GRTE'] }}");
destino_selec.onchange = function(){
inicial = destino_selec.value.indexOf("(");
final = destino_selec.value.indexOf(")");
cd_grte_para = destino_selec.value.substring(inicial+1,final);
// alert(cd_grte_para);

fetch('/select_cli/' + cd_grte_para).then(function(response){
response.json().then(function(data){
//let optionHTML = '<option value="" disabled selected>Selecione o Gerente</option>';
let optionHTML = '';
count  = Object.keys(data).length;
if (count > 0) {
optionHTML += '<i class="fa fa-check-circle" aria-hidden="true" style="color: green"></i>';
} else {
optionHTML += '<i class="fa fa-times-circle" aria-hidden="true" style="color: red"></i>';
}
// destino_cc.innerHTML = optionHTML;
destino_cc.innerHTML = optionHTML;
});
});
}   
</script>

这是html文章：

{% block main %}
<span><br></span>
<form action="" method="post">
<div class="row">
<div class="col-5"><h2 class="text-left" 
style="padding: 10px ;border-width: 10px;border-left: solid #9d1047"><b>Solicitação de tranferências</b></h2></div>
<div class="col-7" style="padding: 10px "><input type="submit" value="Solicitar" class="btn btn-primary fw-bold mb-2" 
style="left: 86%; position:relative; z-index: 2; background-color: #9d1047; border-color:#9d1047"/></div>       
</div>

<table id="data" class="tabela-historica">
<thead>
<tr>
<th width=15%   rowspan=2   >Cliente    </th>
<th width=19%   rowspan=2   >Origem     </th>
<th width=1%    rowspan=2   >cc         </th>
<th width=15%   colspan=2   >Saldo      </th>
<th width=19%   rowspan=2   >Destino    </th>
<th width=1%    rowspan=2   >cc         </th>
<th width=10%   rowspan=2   >Movimento  </th>
<th width=15%   rowspan=2   >Motivo     </th>
<th width=5%    rowspan=2   ><span>Selecionar  </span><input type="checkbox" onClick="toggle(this)" /></th>
</tr>
<tr>
<th>Atual</th>
<th>Melhor Ponto</th>
</tr>
</thead>
<tbody height: 100%>
{% for row in tbl_cli %}
<tr>
<td>{{ row['NM_CLI'] }} <br> 
{% if row['NM_CLI'] == row['NM_GRP_FAMILIAR']   %}

{% else %}
<b> Família: </b>{{ row['NM_GRP_FAMILIAR'] }}
{% endif %}

<!-- <b>Família: </b>{{ row['NM_GRP_FAMILIAR'] }} </td> -->
</td>
<td> <b>Ger: </b>{{row['NM_ABDO_GRTE_DE']}} ({{ row['CD_GRTE_DE'] }})<br> <b>Ag: </b> {{ row['NOMEAG_DE'] }} ({{row['CODAG_DE']}}) </td>
<!-- <td>{{row['cc_orig']}} </td> -->

<td style="text-align: center">
{% if row['CTA_CORRENTE'] %}
<i class="fa fa-check-circle" aria-hidden="true" style="color: green"></i>
{% else %}
<i class="fa fa-times-circle" aria-hidden="true" style="color: red"></i>
{% endif %}
</td>
<td>{{row['SLD_TOT_MM']}} <br> <b>Fam: </b>{{row['SLD_TOT_FAMILIAR_MM']}} </td>
<td>{{row['SLD_TOT_MAX_MM']}} <br> <b>Fam: </b>{{row['SLD_TOT_FAMILIAR_MAX_MM']}} </td>

<td>
<select class="form-select" style="font-size: 10px; width: 100%" name="ger_escolhido" id="{{ row['ID_ROW_GRTE'] }}">
<option value="" disabled selected>Selecione o gerente destino</option>
{% for ger in tbl_codger %}
<option style="font-size: 10px;" name="{{ ger['CHAVE'] }}"">{{ ger['CHAVE'] }}</option>
{% endfor %}
</select>
</td>
<td id="cc_dest_{{ row['ID_ROW_GRTE'] }}" ></td>

<td>if segmento <br> if agencia </td>
<td> <textarea class="form-control" name="motivo" style="font-size: 10px;" placeholder="Descreva o motivo..."></textarea> </td>
<td style="text-align: center;"><input type="checkbox" value="{{ row['ID_ROW_GRTE'] }}" name="boxes"/></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
{% endblock %}

你能帮我指出我犯错误的地方吗？

Answer 1

这样想

1. 在html中，您在一个项目集合上循环，并基于这些项目创建行。

2. 在您的脚本代码中，您没有循环。您只需创建脚本代码的一个实例。

3. 要按原样使用您的代码，您有两个选项

a(将脚本代码附加到html中的循环中，即html循环将创建表行，并将脚本代码添加到该行。

b( 保持html循环原样，然后将脚本代码放入循环中，即执行类似的操作

{% for row in tbl_cli %}
<Script>.....
{% endif %}

4. 更好的选择是更改脚本，使其在类上触发，即将脚本代码更改为以下内容。优点是不必循环脚本(正如我之前提到的(。下面的脚本说-查找类为form-select的所有元素，并为其中的每一个元素将代码附加到onchange事件

document.querySelectorAll(".form-select").forEach(function(element) {
element.onchange = ......
})

因为您的脚本很可能在创建表行之前"存在"，所以您应该将其"附加"到创建脚本时同时存在的内容上。这意味着你要做一些类似的事情

document.querySelectorAll("table#data tr.form-select").forEach(function(element) {
element.onchange = ......
})