javascript - 从表数据创建数组并当前在数组中获取空​​字符串

Question

我有一个表，所有者需要在其中输入详细信息:

<table id="ownerDetailsTable" style="margin-top: 20px; margin-bottom: 20px; width: 100%">
                    <thead>
                        <tr>
                            <td style="font-weight: bold">HP Point of Contact Name</td>
                            <td style="font-weight: bold">HP Point of Contact Title</td>
                            <td style="font-weight: bold">HP Point of contact email</td>
                        </tr>
                    </thead>
                    <tbody id="tableToModify">
                        <tr id="1">

                            <td>

                                @Html.TextBoxFor(m => m.InterventionOwnerName, new { @class = "form-control element-one", @maxlength = 250, placeholder = "Owner Name", value = "" })
                            </td>
                            <td>

                                @Html.TextBoxFor(m => m.InterverntionOwnerTitle, new { @class = "form-control element-two", @maxlength = 250, placeholder = "Owner Title", value = "" })
                            </td>
                            <td>

                                @Html.TextBoxFor(m => m.InterventionOwnerEmail, new { @class = "form-control element-three", @maxlength = 250, placeholder = "Owner Email", value = "" })
                            </td>

                        </tr>
                    </tbody>
                </table>
                <input id="addRow" , type="button" onclick="createRow(); getOwnerDetails()" value="Add Point of Contact" class="btn btn-primary" />

当前，单击时会创建新的一行输入，并且用户输入的详细信息将进入一个数组:

<script>
        var ownerDetailArray = [];
        function getOwnerDetails() {
            $('table#ownerDetailsTable tr').each(function () {
                var arrayOfThisRow = [];
                var tableData = $(this).find('input');
                if (tableData.length > 0) {
                    tableData.each(function () {
                        arrayOfThisRow.push($(this).text())
                    });
                    ownerDetailArray.push(arrayOfThisRow);
                }
                console.log(ownerDetailArray);
            });
        }

正在创建数组，但数组中的字符串(应该是用户输入的信息)为空。我觉得问题在于我尝试查找数据并将其插入数组的方式。任何帮助/建议将不胜感激!

Answer 1

如果您尝试获取输入值，则更改 arrayOfThisRow.push($(this).text())至arrayOfThisRow.push($(this).val());我假设你的 @Html.TextBoxFor创建<input />标签。

        var ownerDetailArray = [];
        function getOwnerDetails() {
            $('table#ownerDetailsTable tr').each(function () {
                var arrayOfThisRow = [];
                var tableData = $(this).find('input');
                if (tableData.length > 0) {
                    tableData.each(function () {
                        arrayOfThisRow.push($(this).val());
                    });
                    ownerDetailArray.push(arrayOfThisRow);
                }
                console.log(ownerDetailArray);
            });
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="ownerDetailsTable" style="margin-top: 20px; margin-bottom: 20px; width: 100%">
                    <thead>
                        <tr>
                            <td style="font-weight: bold">HP Point of Contact Name</td>
                            <td style="font-weight: bold">HP Point of Contact Title</td>
                            <td style="font-weight: bold">HP Point of contact email</td>
                        </tr>
                    </thead>
                    <tbody id="tableToModify">
                        <tr id="1">

                            <td>
<input class = "form-control element-one", maxlength="250", placeholder = "Owner Name", value = ""/>
                                <@Html.TextBoxFor(m => m.InterventionOwnerName, new { @>class = "form-control element-one", @maxlength = 250, placeholder = "Owner Name", value = "" })
                            </td>
                            <td>
<input class = "form-control element-one", maxlength="250", placeholder = "Owner Name", value = ""/>
                                @Html.TextBoxFor(m => m.InterverntionOwnerTitle, new { @class = "form-control element-two", @maxlength = 250, placeholder = "Owner Title", value = "" })
                            </td>
                            <td>
<input class = "form-control element-one", maxlength="250", placeholder = "Owner Name", value = ""/>
                                @Html.TextBoxFor(m => m.InterventionOwnerEmail, new { @class = "form-control element-three", @maxlength = 250, placeholder = "Owner Email", value = "" })
                            </td>

                        </tr>
                    </tbody>
                </table>
                <input id="addRow" , type="button" onclick="getOwnerDetails()" value="Add Point of Contact" class="btn btn-primary" />