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>

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

1 个答案: