单击表格每一行中的按钮打开一个弹出窗口

Question

我有一张采购订单表。每行都有一个采购订单编号和费率按钮。单击评分按钮时，将打开一个弹出窗口，用户可以在其中对该行的供应商进行评分和评论。如果评分已经给出，那么弹出窗口将以只读模式显示评分和备注。

但我的问题是费率按钮仅适用于第一行，即点击任何行按钮时仅显示第一行采购订单的评级。

HTML 代码

<table class="table table-hover o_my_status_table quotation_table">

    <thead>
        <tr class="active">
            <th> </th>
            <th>Purhase Order</th>
        </tr>
    </thead>
    <t t-foreach="orders" t-as="order">
        <tr class="order_lines">
            <td><input type="submit" name="rate" id="rate" value="Rate" class="btn btn-primary" /> </td>
            <td><a t-attf-id="order_{{order.id}}" class="from-open-link" t-attf-href="#">
                <t t-esc="order.name" /></a>
            </td>
        </tr>
    </t>

</table>

模式代码

<div id="hidden_box" class="modal fade">
    <div class="modal-dialog modal-content" style="min-height:200px;max-width:400px;">
        <div class="modal-body" id="pop_html">
            <input type="hidden" t-att-value="order.name" t-esc="order.name" name="id" invisible="1" />
            <div align="center">

                <div class="rate">
                    <t t-if="order.company_rating == False">
                        <input type="radio" id="star5" name="rate" value="5" />
                        <label for="star5" title="text">5 stars</label>
                        <input type="radio" id="star4" name="rate" value="4" />
                        <label for="star4" title="text">4 stars</label>
                        <input type="radio" id="star3" name="rate" value="3" />
                        <label for="star3" title="text">3 stars</label>
                        <input type="radio" id="star2" name="rate" value="2" />
                        <label for="star2" title="text">2 stars</label>
                        <input type="radio" id="star1" name="rate" value="1" />
                        <label for="star1" title="text">1 star</label>
                    </t>
                    <t t-else="">
                        <t t-if="order.company_rating=='5'">
                            <input type="radio" id="dstar5" name="rate" value="5" checked="checked" />
                        </t>
                        <t t-else="">
                            <input type="radio" id="dstar5" name="rate" value="5" />
                        </t>
                        <label for="star5" title="text">5 stars</label>
                        <t t-if="order.company_rating=='4'">
                            <input type="radio" id="dstar4" name="rate" value="4" checked="checked" />
                        </t>
                        <t t-else="">
                            <input type="radio" id="dstar4" name="rate" value="4" />
                        </t>
                        <label for="star4" title="text">4 stars</label>
                        <t t-if="order.company_rating=='3'">
                            <input type="radio" id="dstar3" name="rate" value="3" checked="checked" />
                        </t>
                        <t t-else="">
                            <input type="radio" id="dstar3" name="rate" value="3" />
                        </t>
                        <label for="star3" title="text">3 stars</label>
                        <t t-if="order.company_rating=='2'">
                            <input type="radio" id="dstar2" name="rate" value="2" checked="checked" />
                        </t>
                        <t t-else="">
                            <input type="radio" id="dstar2" name="rate" value="2" />
                        </t>
                        <label for="star2" title="text">2 stars</label>
                        <t t-if="order.company_rating=='1'">
                            <input type="radio" id="dstar1" name="rate" value="1" checked="checked" />
                        </t>
                        <t t-else="">
                            <input type="radio" id="dstar1" name="rate" value="1" />
                        </t>
                        <label for="star1" title="text">1 star</label>
                    </t>

                </div>
            </div>
        </div>

        <br />
        <t t-if="order.company_remarks">
            <input type="text" name="remarks" t-att-value="order.company_remarks" id="remarks" />
        </t>
        <t t-else="">
            <input type="text" name="remarks" id="remarks" value="" class="form-control text-left" style="margin-top:20px;margin-left:10px;" />
        </t>
        <t t-if="order.company_rating == False">
            <input type="submit" name="button_id" value="Rate" id="rate_submit" class="btn btn-primary" />
        </t>
    </div>

<style type="text/css">
    .rate {
        margin: 0;
        padding: 0;
    }

    .rate {
        float: left;
        height: 46px;
        padding: 0 10px;
    }

    .rate:not(:checked)>input {
        position: absolute;
        top: -9999px;
    }

    .rate:not(:checked)>label {
        float: right;
        width: 1em;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 30px;
        color: #ccc;
    }

    .rate:not(:checked)>label:before {
        content: '★ ';
    }

    .rate>input:checked~label {
        color: #ffc700;
    }

    .rate:not(:checked)>label:hover,
    .rate:not(:checked)>label:hover~label {
        color: #deb217;
    }

    .rate>input:checked+label:hover,
    .rate>input:checked+label:hover~label,
    .rate>input:checked~label:hover,
    .rate>input:checked~label:hover~label,
    .rate>label:hover~input:checked~label {
        color: #c59b08;
    }
</style>

Javascript

<script type="text/javascript">
    document.getElementById("remarks").defaultValue = "";
    $(".btn").on('click', function () {
        $('#hidden_box').modal('show');
    });
</script>

我知道按钮不会像用 js 写的那样工作。请帮我解决这个问题。

Answer 1

jQuery 选择器 $(".btn") 仅适用于具有该类的第一个元素。

如果您想触发您的脚本点击每一行，您需要以另一种方式获取所有相关元素。我建议querySelectorAll()，使用这样的东西：

<script type="text/javascript">
   var buttons = querySelectorAll("input.btn")
   buttons.forEach(element => {
     element.addEventListener('click', () => {
      // using vanilla JS
      var el = querySelector("#hidden_box")
      el.classList.toggle("show"); // you would need a CSS class of "show" to make the modal visible
      // or using your original jQuery
      $('#hidden_box').modal('show');
     })
   });
</script>