how can I call javascript function when move the focus from one column to another column of the table
Question
I have the following column in table. I want to call the javascript function changecolumn() when I move to another column, here is the code
<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>
2 answers
solution1
0 2021-02-16 08:23:36
I want to call the javascript function changecolumn() when I move to another column
As @Barmar mentioned, please note that focus usually affect on inputs or editable content etc, not all html elements can be focused.
If you'd like to call js function changecolumn() when user click on another column, you can try following workaround.
Set a flag data-cindex indicates the current column index for 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>
Trace previous selected column index and compare it with current column index on td click event
$(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();
}
})
})
solution2
0 2021-02-16 08:36:54
like @Fei_Han and @Barmer said:
not all html elements can be focused.
just to complete @Fei_Han answer, in focusable element there is Focusout event listener. I've made you a snippet.
If you click on an input and then click away. it will run consoleThis function.
function consoleThis() { console.log("Lost Focus") }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <table> <tr> <th>Name</th> <th>Email</th> </tr> <tr> <td onfocusout="consoleThis()"><input type="text" name="" placeholder="something"></td> <td onfocusout="consoleThis()"><input type="email" name="" placeholder="email" id=""></td> </tr> <tr> <td onfocusout="consoleThis()"><input type="text" name="" placeholder="anything" id=""></td> <td onfocusout="consoleThis()"><input type="email" name="" placeholder="email" id=""></td> </tr> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.