时间戳

首页 > 解决方案 > 将焦点从一列移动到表格的另一列时如何调用javascript函数

javascript - 将焦点从一列移动到表格的另一列时如何调用javascript函数

问题描述

我在表中有以下列。当我移动到另一列时，我想调用 javascript 函数 changecolumn()，这里是代码

<script>
 changecolum()
 {
 }
</script>
<table id="attendance">
<tr>
 <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsSickMarked" data-tag="SickHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsSickMarked" /></td>
 <td><a href="#" data-pk="SickHrs">@Model.attendanceLogList[i].SickHrs</a><input asp-for="@Model.attendanceLogList[i].SickHrs" type="hidden" class="bros" /></td>
 <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" data-tag="HolidayHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" /> </td>
 <td class="htInvalid"><a href="#" data-pk="HolidayHrs">@Model.attendanceLogList[i].HolidayHrs</a><input  asp-for="@Model.attendanceLogList[i].HolidayHrs" type="hidden" class="bros"/></td>
 </tr>
</table>

标签： javascripthtmlasp.net-core

解决方案

当我移动到另一列时，我想调用 javascript 函数 changecolumn()

正如@Barmar 提到的，请注意焦点通常会影响输入或可编辑内容等，并非所有 html 元素都可以被聚焦。

如果您想changecolumn()在用户单击另一列时调用 js 函数，您可以尝试以下解决方法。

设置一个标志data-cindex指示当前列的索引td

<table id="attendance">
    <tr>
        <td data-cindex="0"><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsSickMarked" data-tag="SickHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsSickMarked" /></td>
        <td data-cindex="1"><a href="#" data-pk="SickHrs">@Model.attendanceLogList[i].SickHrs</a><input asp-for="@Model.attendanceLogList[i].SickHrs" type="hidden" class="bros" /></td>
        <td data-cindex="2"><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" data-tag="HolidayHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" /> </td>
        <td data-cindex="3" class="htInvalid"><a href="#" data-pk="HolidayHrs">@Model.attendanceLogList[i].HolidayHrs</a><input asp-for="@Model.attendanceLogList[i].HolidayHrs" type="hidden" class="bros" /></td>
    </tr>
</table>

跟踪先前选择的列索引并将其与 td 单击事件上的当前列索引进行比较

$(function () {

    //set default value based on your actual requirement
    var selected_c_index = 0;

    $("table#attendance tr td").click(function () {
        var cindex = $(this).data("cindex");
        if (selected_c_index!=cindex) {
            selected_c_index = cindex;
            
            changecolum();
        }
    })
})

推荐阅读