Question

单击TR时，我正在尝试获取相应TD索引的TH值。所以在下表中：

<table>
 <thead>
  <th>dogs</th>
  <th>cats</th>
  <th>lizards</th>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
 </tbody>
</table>

使用以下js：

$("tr").live("click", function() {
    //get values of row headers
    alert( $(this).closest('table').find('th').eq($(this).index()).val() );
 });

当你点击单元格1会提醒“狗”时，单击单元格2会提醒“猫”等。

目前我的代码只提醒一个空白的警告框（没有），但也没有错误。

思想？

Answer 1

您不希望.val()。您想要.text()。

编辑：根据评论，由于您仍然希望它通过绑定到<tr>来工作，因此最终代码应如下所示：

$("tr").live("click", function(event) {
    //get values of row headers
    alert($(this).closest('table').find('th').eq($(event.target).index()).text());
});

注意将event对象传入处理程序，然后使用event.target引用实际单击的元素。

展示here。

Answer 2

您的代码存在两个问题。正如GregL已经发布的那样，你必须用text（）替换val（）。你也得到tr的索引并使用它，所以选择th。所以得到td的索引而不是它的工作原理： http://jsfiddle.net/gF9A4/

Answer 3

鉴于相关单元格中可能包含元素，期望事件目标成为单元格似乎不可靠。因此，第一步应该是测试它是否是一个单元格，如果不是，则将DOM上升到第一个TD（或可能是TH）并获得其索引。

然后获取包含表并获取具有相同索引的第一行中单元格的文本内容。在每一行上放一个监听器似乎不合理，如果将监听器放在表上，那么代码就会非常简单，只需要一个监听器。

一个简单的JavaScript解决方案使用更多的代码，但它非常可靠：

function getHeadingText(e) {
  var tgt = e.target || e.srcElement;
  var cell;

  // Make sure the tgt is a table cell
  while (tgt && (!tgt.tagName || tgt.tagName.toLowerCase() != 'td')) {
    tgt = tgt.parentNode;
  }
  cell = this.rows[0].cells[tgt.cellIndex];

  // For debug
  alert(cell.textContent || cell.innerText);

  return cell.textContent || cell.innerText;

}

可以使用jQuery附加它：

$(document).ready(function(){$('table').click(getHeadingText);});

使用jQuery单击TR时检索相应的TH值

3 个答案: