0

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

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

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

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

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

或者

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

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

有什么建议么？

4

1 回答 1

0

如果您使用父表格元素来布局页面上的元素，只需知道这是一种已弃用的无语义做法，因为表格元素用于制表数据。您应该使用 CSSfloat属性，这是约定，请参阅CSS Floats 101 · An A List Apart 文章和w3schools.com

重构该父表应该可以解决您的问题。否则，您可以通过修改 JavaScript 中的选择器并通过为可编辑td元素分配一个类（例如edittable-cell）来修复它，这样您就不会将事件侦听器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
});

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

JavaScript

$(".edittable-cell").dblclick(function(event) {
  event.stopPropagation();
  // .. your code here
});
于 2013-08-25T14:13:08.660 回答