根据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. 要按原样使用您的代码，您有 2 个选项

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 = ......
})