javascript - 将表中的数据绑定到JavaScript数组的最有效方法？(Most efficient way to bind data in a table into a JavaScript array?)

Question

I have a table that is generated from server side on a partial and rendered using ajax.

(我有一个表是从服务器端部分生成的，并使用ajax呈现。)

Because of this I lose binding.

(因此，我失去了约束力。)

So my only option is to map everything to a JavaScript array and post it.

(因此，我唯一的选择是将所有内容映射到JavaScript数组并将其发布。)

Is there a way to map everything using jQuery without having to iterate every row then every column and look for each input one by one?

(有没有一种方法可以使用jQuery映射所有内容，而不必依次遍历每一行然后每一列并逐一查找每个输入？)

Are there any other options?

(还有其他选择吗？)

Perhaps I have to use something like Vue?

(也许我必须使用Vue之类的东西？)

Here is my partial:

(这是我的部分：)

@model Project.Areas.Robotics.Models.ViewModels.DefectRecordViewModel
<form method="post">
    <card>
        <card-header icon="fas fa-thumbs-down" title="Pe?as NOK">
        </card-header>
        <card-body>



            <div class="form-row">
                <div class="form-group col-md-6">
                    <h4>
                        <span class="">
                            <b><i class=""></i>Registo</b> @Model.ProductionRecordId
                        </span>
                    </h4>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group col-md-6">
                    <label asp-for="References"></label>
                    <select id="references-nok" asp-items="Model.References" class="custom-select custom-select-sm" onchange="selectReferences(this)">
                        <option value="">--</option>
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table id="tblDefects" class="table table-sm" style="width:100%;">
                    <thead class="bg-olive">
                        <tr>
                            <th>@Html.DisplayNameFor(model => model.DefectCodes[0].DefectCodeId)</th>
                            <th>@Html.DisplayNameFor(model => model.DefectCodes[0].Quantidade)</th>
                            <th>@Html.DisplayNameFor(model => model.DefectCodes[0].Detalhes)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < Model.DefectCodes.Count(); i++)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(model => model.DefectCodes[i].DefectCode)
                                    <input type="hidden" asp-for="DefectCodes[i].DefectCodeId" />
                                    <input type="hidden" class="reference-holder" asp-for="DefectCodes[i].ReferenceId" />
                                    <input type="hidden" asp-for="DefectCodes[i].DefectCodeId" />
                                </td>
                                <td>

                                    <input asp-for="DefectCodes[i].Quantidade" class="form-control form-control-sm" />
                                    <span asp-validation-for="DefectCodes[i].Quantidade" class="text-danger"></span>
                                </td>
                                <td>
                                    <input asp-for="DefectCodes[i].Detalhes" class="form-control form-control-sm" />
                                    <span asp-validation-for="DefectCodes[i].Detalhes" class="text-danger"></span>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>




        </card-body>
        <card-footer>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <button type="button" data-url="@Url.Page("Index","AddDefectCode")" onclick="addDefectRecord(this)" class="btn btn-success btn-sm"><i class="fas fa-plus"></i> Adicionar</button>
                    <button type="button" onclick="hideDetails()" class="btn btn-danger btn-sm"><i class="fas fa-times"></i> Cancelar</button>
                </div>
            </div>
        </card-footer>
    </card>
</form>    

  ask by Jackal translate from so

Answer 1

等待大神答复