回发后将焦点返回到表中的下一个输入元素

Question

我有一个带有表格的屏幕，其中可以包含任意数量的输入字段，具体取决于限制显示记录的过滤器。每个输入字段旁边是一个链接，用户将点击该链接以将该记录的数据保存到数据库中。我想要做的是当用户单击任何给定行的保存按钮时，我希望光标移动到下一行的下一个输入字段（如果存在）。我知道回发会删除我当前的光标位置，所以我一直在尝试将它保存在一个没有运气的变量中。任何帮助，将不胜感激。 根据我的理解，javascript 应该获取元素并将其存储到隐藏字段中。我得到的结果是我网站的 URL。只有当我将该字段存储到 test2 字段中时，我才能获得存储的实际元素。我应该尝试以某种方式获取元素的坐标并存储它吗？但如果我这样做了，我将如何获得表格中可用的下一个输入字段？

下面的表定义和 JavaScript：

$('.checklistequipmentinsertlink').mousedown(function () {
    document.getElementById('savedelement').value = document.querySelector("a:active");
    var test2 = document.querySelector("a:active");
    var test = document.getElementById('savedelement').value;
});

<div id="scrollbox" class="tablediv" onscroll="javascript:document.getElementById('scrollposition').value = this.scrollTop">
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayName("Equipment/Location")
                </th>
                <th>
                    @Html.DisplayName("Category")
                </th>
                <th>
                    @Html.DisplayName("Expected Count/Checkoff")
                </th>
                <th>
                    @Html.DisplayName("Actual Count/Checkoff")
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model.postChecklistEqupmentList != null)
            {
                @foreach (var item in Model.postChecklistEqupmentList)
                {
                    <tr>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_ID)
                        </td>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_ID)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_Desc)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Equipment_Category_Desc)
                        </td>
                        <td id="expectedcount">
                            @Html.DisplayFor(modelitem => item.Equipment_Count_Or_Checked)
                        </td>
                        <td>
                            @Html.TextBoxFor(modelitem => item.Actual_Count_Or_Checked, new
                             {
                                htmlAttributes = new
                                  {
                                     @class = "form-control"
                                  },
                                autofocus = "autofocus"
                            })
                        </td>
                        <td>
                            <a href="#" class="checklistequipmentinsertlink">Save</a>
                        </td>
                    </tr>
                }
            }

        </tbody>
    </table>
</div>

Answer 1

好吧，今天早上醒来后，我决定尝试以不同的方式解决这个问题。我想出的是尝试找出我的表中的当前行点击了我的保存元素。我使用 jquery 来帮助我获取您将在 getCurrentRowClicked 函数中看到的信息。单击其中一个保存链接时，该功能将启动。然后，当屏幕执行 windows.onload 事件时，我会启动 movePostChecklistCursorToNextRow 函数，以便在加载期间我可以将焦点定位在表格中我需要的位置，或者如果表没有任何记录，然后在我在表上方的一个搜索框中。我不确定这是否是完成我想做的最干净的方法，但它确实有效。

function getCurrentRowClicked(el) {
    document.getElementById('savedRowCount').value = $(el).closest('tr').index() + 1;    
}


function movePostChecklistCursorToNextRow() {
    var stringCount = document.getElementById('savedRowCount').value;
    var rowCount = parseInt(stringCount);  
    var verityRowsExist = $('.table tr:eq(1)').index();
    var lastRow = $('.table tr:last').index() + 1;    
    if (verityRowsExist > -1) {
        if (rowCount < lastRow) {
            rowCount = rowCount + 1
            $('.table tr:eq(' + rowCount + ')').find('input').focus();
        }
        else {
            $('.table tr:last').find('input').focus();
        }
    }    
    else
    {
        $('#equipmentSearch').focus();
        getCurrentRowClicked(this);
    }
}

<div class="main">
    <h2>Post Checklist - Equipment/Location Checks</h2>
    <br />
    <form method="post">
        <input asp-for="CurrentDeputyID" hidden />
        <input asp-for="SavedActivityLogID" hidden />
        <input asp-for="SavedChecklistID" hidden />
        <input asp-for="ScrollPostion" id="scrollposition" hidden />
        <input asp-for="savedRowCount" id="savedRowCount" hidden />
        <div class="row">
            <div class="col-sm-4">
                <a href="./Post_Checklist_Notes">Enter Notes</a>
            </div>
            <div class="col-sm-4">
                <a href="./Post_Checklist_Stats">Enter Stats</a>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-sm-4">
                <label asp-for="postChecklistEquipmentView.Checklist_Equipment_Desc">Equipment</label>
                <input asp-for="postChecklistEquipmentView.Checklist_Equipment_Desc" class="form-control" id="equipmentSearch" />
            </div>
            <div class="col-sm-4">
                <label asp-for="postChecklistEquipmentView.Equipment_Category_ID">Category</label>
                <select asp-for="postChecklistEquipmentView.Equipment_Category_ID" asp-items="@(new SelectList(Model.equipmentCategoriesDropDown,"Equipment_Category_ID", "Equipment_Category_Desc"))" class="form-control"></select>
            </div>
            <div class="col-sm-4">
                <input type="submit" value="Search" id="searchButton" class="btn search-btn btn-light form-control" />
            </div>
        </div>
        <br />
    </form>
</div>

<div id="scrollbox" class="tablediv" onscroll="javascript:document.getElementById('scrollposition').value = this.scrollTop">
    <table class="table" id="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayName("Equipment/Location")
                </th>
                <th>
                    @Html.DisplayName("Category")
                </th>
                <th>
                    @Html.DisplayName("Expected Count/Checkoff")
                </th>
                <th>
                    @Html.DisplayName("Actual Count/Checkoff")
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model.postChecklistEqupmentList != null)
            {
                @foreach (var item in Model.postChecklistEqupmentList)
                {
                    <tr>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_ID)
                        </td>
                        <td class="hiddentd">
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_ID)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Checklist_Equipment_Desc)
                        </td>
                        <td>
                            @Html.DisplayFor(modelitem => item.Equipment_Category_Desc)
                        </td>
                        <td id="expectedcount">
                            @Html.DisplayFor(modelitem => item.Equipment_Count_Or_Checked)
                        </td>
                        <td>
                            @Html.TextBoxFor(modelitem => item.Actual_Count_Or_Checked)
                        </td>
                        <td>
                            <a href="#" class="checklistequipmentinsertlink">Save</a>
                        </td>
                    </tr>
                }
            }

        </tbody>
    </table>
</div>