在嵌套的html表中单击确切的单元格

Question

在我的一个页面中，我使用了来自此链接的可编辑html表的示例：http://mrbool.com/how-to-create-an-editable-html-table-with-jquery/27425，它没有任何问题，当我点击表格中的单元格时，它会将其更改为文本框

但是，我必须更改页面的布局，我必须将上面提到的示例放在另一个html表中（嵌套）。

现在的问题是，当我点击单元格时，它没有识别子表，它有数据而我想点击但它点击父表的单元格，在这种情况下是父表，并拥有2个不同的表。

所以，我希望你帮助的是：

1. 获取方法以在单击子表时识别子表的单元格

或者

1. 某种方式使我的页面上的两个表格并排排列。目前我正在使用父表将我的其他2个表并排放置。

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

有什么建议吗？

Answer 1

如果您正在使用父表元素来布局页面上的元素，请知道这是一种不推荐的非语义实践，因为表元素用于制表数据。您应该使用CSS float属性，这是惯例，请参阅CSS Floats 101 · An A List Apart Article和w3schools.com

重构父表应解决您的问题。否则，您可以通过修改JavaScript中的选择器并通过为类（例如td）分配edittable edittable-cell元素来修复它，这样您就不会将事件侦听器分配给其他表'{{1不必要的元素并导致其他地方出现不必要的行为。

<强>的JavaScript

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
});