我有一个带有表的屏幕,其中可以包含任意数量的输入字段,具体取决于限制所显示记录的过滤器。每个输入字段旁边都有一个链接,用户将点击该链接以将该记录的数据保存到数据库中。我想要做的是当用户点击任何给定行的保存按钮时,我希望光标移动到下一行的下一个输入字段(如果存在)。我知道回发将擦除我当前的光标位置,所以我一直在努力将它保存在变量中而没有运气。任何帮助,将不胜感激。基于我理解的javascript应该获取元素并将其存储到隐藏字段中。我得到的结果是我网站的网址。只有当我将字段存储到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>
好吧,所以我今天早上醒来后,我决定尝试以不同的方式解决这个问题。我想出的是尝试弄清楚我的表中的当前行是否点击了我的保存元素。我用jquery来帮助我获取你将在getCurrentRowClicked函数中看到的信息。单击其中一个保存链接时,该功能将启动。然后当屏幕执行其windows.onload事件时,我启动movePostChecklistCursorToNextRow函数,以便在onload期间我可以将焦点定位在我需要的表格中,或者如果表格没有任何记录,那么在其中一个搜索框中我在桌子上面。我不确定这是否是完成我想要完成的最干净的方法,但它确实有效。
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>