Unable to find html table column index or header name using jquery.

huangapple go评论54阅读模式
英文:

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.

Unable to find html table column index or header name using jquery.

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;
    }
});
  1. 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.
  2. 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;
    }
});
  1. 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.
  2. 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(&#39;keydown&#39;, &#39;input&#39;, function(event) {
  if (event.key === &#39;Enter&#39;) {
    const index = $(this).closest(&#39;td&#39;).index();
    const thText = $(this).closest(&#39;table&#39;).find(&#39;thead th&#39;).eq(index).text();
    console.log(index, thText);
  }
})

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;1th&lt;/th&gt;
      &lt;th&gt;2th&lt;/th&gt;
      &lt;th&gt;3th&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;1&quot;&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;2&quot;&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type=&quot;text&quot; placeholder=&quot;3&quot;&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月14日 12:49:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/76245861.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定