英文:
Unable to find html table column index or header name using jquery
问题
I am trying to find a column index or header name when my cursor is in QTY input field inside html table in any of the row. Please view screenshot below.
在尝试找到光标位于任何行的HTML表格内的QTY输入字段时,我想找到列索引或标题名称。请查看下面的截图。
In this image my cursor is in Qty column, when I press enter I am not able to get the header name (QTY) or column index.
在这个图像中,我的光标位于Qty列中,当我按Enter键时,我无法获取标题名称(QTY)或列索引。
Following is the code to find index which is not working and always resulted zero. Any help would be appreciated, thanks.
以下是查找索引的代码,但它不起作用,总是返回零。任何帮助都将不胜感激,谢谢。
$('#table-id').on('keypress', function (ev) {
debugger
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var index = $(this).closest("td").index;
}
});
英文:
I am trying to find a column index or header name when my cursor is in QTY input field inside html table in any of the row. Please view screenshot below.
In this image my cursor is in Qty column, when I press enter I am not able to get the header name (QTY) or column index.
Following is the code to find index which is not working and always resulted zero. Any help would be appreciated, thanks.
$('#table-id').on('keypress', function (ev) {
debugger
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var index = $(this).closest("td").index;
}
});
答案1
得分: 1
$('#table-id').on('keypress', function (ev) {
debugger
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var index = $(this).closest("td").index;
var headerName = $('#table-id th').eq(index).text();
}
});
.eq() 是一个 jQuery 方法,它允许您根据索引从一组元素中选择特定的元素。希望这有所帮助。
英文:
$('#table-id').on('keypress', function (ev) {
debugger
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
var index = $(this).closest("td").index;
var headerName = $('#table-id th').eq(columnIndex).text();
}
});
.eq() is a jQuery method that allows you to select a specific element from a collection of elements based on its index. hope this helps
答案2
得分: 0
There are some mistakes in the code. Here is the updated code:-
$('#table-id').on('keypress', function (event) {
var keycode = (event.keyCode ? event.which : '');
if (keycode == '13') {
var index = $(this).closest("td").index;
}
});
- You have "ev" as a parameter in the event handler function parameter, while you are using event inside the function. I have updated the parameter from ev to event.
- You are mixing javascript and jquery. In javascript, we can use event.keyCode for getting key code. While, in jQuery, we use event.which for getting key code. I have updated that line.
英文:
There are some mistakes in the code. Here is the updated code:-
$('#table-id').on('keypress', function (event) {
var keycode = (event.keyCode ? event.which : '');
if (keycode == '13') {
var index = $(this).closest("td").index;
}
});
- You have "ev" as a parameter in the event handler function parameter, while you are using event inside the function. I have updated the parameter from ev to event.
- You are mixing javascript and jquery. In javascript, we can use event.keyCode for getting key code. While, in jQuery, we use event.which for getting key code. I have updated that line.
答案3
得分: 0
以下是您提供的代码的翻译:
$(document).on('keydown', 'input', function(event) {
if (event.key === 'Enter') {
const index = $(this).closest('td').index();
const thText = $(this).closest('table').find('thead th').eq(index).text();
console.log(index, thText);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1th</th>
<th>2th</th>
<th>3th</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" placeholder="1"></td>
<td><input type="text" placeholder="2"></td>
<td><input type="text" placeholder="3"></td>
</tr>
</tbody>
</table>
希望这对您有所帮助。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).on('keydown', 'input', function(event) {
if (event.key === 'Enter') {
const index = $(this).closest('td').index();
const thText = $(this).closest('table').find('thead th').eq(index).text();
console.log(index, thText);
}
})
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1th</th>
<th>2th</th>
<th>3th</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" placeholder="1"></td>
<td><input type="text" placeholder="2"></td>
<td><input type="text" placeholder="3"></td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论