获取嵌套html表中单击的精确单元格

在我的一个页面中，我使用了这个链接中的一个可编辑html表格示例：，它可以正常工作，当我单击表格中的一个单元格时，它会将其更改为文本框

然而，我不得不改变页面的布局，我必须将上面提到的示例放在另一个html表（嵌套）中

现在的问题是，当我单击单元格时，它没有标识包含数据的子表，我想单击它，但它单击了父表的单元格，在本例中是父表，并包含两个不同的表

所以，我想让你帮忙的是：

获取单击子表时标识其单元格的方法

或

以某种方式使我的页面上的两个表并排对齐。目前，我正在使用父表来对齐我的其他两个表，使它们并排放置

如果第二个选择更容易实现，我不需要做太多改变

---

有什么建议吗？

如果您使用父表元素在页面上布局元素，只需知道这是一种不推荐使用的非语义做法，因为表元素用于制表数据。您应该使用CSS

float

属性，这是惯例，请参阅和

重构父表应该可以解决您的问题。否则，您可以通过修改JavaScript中的选择器并使用类（例如，

edittable单元格

）分配edittable

td

元素来修复它，这样您就不会不必要地将事件侦听器分配给其他表的

td

元素，并在其他地方导致不必要的行为

JavaScript

// Instead of the 'td' selector
$("td").dblclick(function() {
  // .. your code here
});

// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
  // .. your code here
});

$(".edittable-cell").dblclick(function(event) {
  event.stopPropagation();
  // .. your code here
});

如果在语义上嵌套数据表和/或仍然存在此问题，则可以尝试防止事件冒泡到其父元素

JavaScript

// Instead of the 'td' selector
$("td").dblclick(function() {
  // .. your code here
});

// Use a more specific selector, eg.:
$('.edittable-cell').dblclick(function() {
  // .. your code here
});

$(".edittable-cell").dblclick(function(event) {
  event.stopPropagation();
  // .. your code here
});

---

当您不使用jQuery时，只需要一个提示，您可以使用普通JS：

e.stopPropagation？e、 stopPropagation（）：e.cancelBubble=true要与IE跨浏览器兼容，jQuery会自行解决这一问题。