想要在單擊表格的任何單元格時獲取表格的行ID

Question

假設我有html表，每個TR都有id。 每個TR都有一些TD，有些TD有輸入控件，有些可能在其中包含文本。

當單擊TD或控件時，應立即返回TR ID。

我嘗試了下面的腳本，它可以正常工作，但是當我單擊類似hello1的文本時，TR id不會返回。

看腳本，告訴我缺少了什么。

<div id="grd1">
    <table>
        <tr id="t1"><td tabindex="0"><span>Hello1</span></td><td tabindex="1"><input /></td><td tabindex="2"><input /></td></tr>
        <tr id="t2"><td tabindex="3"><span>Hello2</span></td><td tabindex="4"><input /></td><td tabindex="5"><input /></td></tr>
    </table>
</div>

$('#grd1 table tr').on('focus', ':input', function(event) {
    alert($(this).closest('tr').attr('id'));
});

Answer 1

使用表格單元格（td）作為選擇器並監聽click事件。

$(document).on('click', '#grd1 td', function(event) {
    alert($(this).closest('tr').attr('id'));
});

這是一個工作樣本

Answer 2

由於您使用的是高級選擇器，因此建議您進行一些更改：

1. 將:input更改為input 。
2. id調用，將其更改為以下內容。
3. 我相信<tr>也是動態的，因此將其與委托一起添加。

更正的代碼：

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="grd1">
  <table>
    <tr id="t1"><td tabindex="0"><span>Hello1</span></td><td tabindex="1"><input /></td><td tabindex="2"><input /></td></tr>
    <tr id="t2"><td tabindex="3"><span>Hello2</span></td><td tabindex="4"><input /></td><td tabindex="5"><input /></td></tr>
  </table>
</div>
<script>
  $('#grd1 table tr').on('click focus', 'td, input, th', function(event) {
    alert($(this).closest('tr').attr('id'));
  });
</script>

警報啊！！！

Answer 3

給表一個ID，例如'table'：

$('#table').children('tbody').children('tr').each(function () {
   var $row = $(this);
   $row.find('input').on('focus', function () {
       alert($row.get(0).id);
   });
});