Question

我正在构建一个Web界面来编辑大表（2600 x 2600）中的值。因为表太大，我只将表的一部分加载到浏览器中，用户可以通过指定xmin，xmax，ymin和ymax值来查看表的小窗口。将x，y坐标附加到我显示的每个标记以反映该单元格在大表中的实际坐标的最佳方法是什么？我查看了jQuery.data（）函数，但是如何将它用于此目的并不明显。

Answer 1

如果您想使用jQuery.data()，只需将属性添加到您的html标记中，如下所示：

<td data-x="..." data-y="...">

然后，您可以使用以下命令访问这些值：

$(element).data('x'); // where element is an td element, you somehow selected

Answer 2

$.data是最好的方法，它比$().data()快一点：

$.data(DOMelement, data-title, data-value);

因此，例如，您可以在事件处理程序中使用this：

$.data(this, 'some-key', 'some-value');

$.data的棘手部分是你必须使用DOM元素作为第一个参数。这意味着如果你有一个jQuery对象，你必须这样做：

$.data($jQueryObject[0], 'some-key', 'some-value');

Answer 3

答案在很大程度上取决于您将如何处理这些数据。您是否经常从元素中查找数据？您是否经常根据坐标寻找元素？

对于大型数据集中的性能，我通常使用JavaScript - 而不是jQuery。仅（x，y）数据的理想选择可以是使用数组，其中包含每个元素的索引数据。像这样：

// Each element in array y contains the x index's data object
var y = [ [{}, {}, {}, {}, {}], [{}, {}, {}, { key: 'value' }, {}] ];

// To get the element at (4, 2) (this will be not-so-fast)
// NOTE: There are faster ways to get this element
var xy = $('table tr:eq(1) td:eq(3)');

// To get the data of (4, 2) (this will be super fast)
var dataOfFourThree = y[1][3]; // { key: 'value' }

如果你有可能在纯JS中反映DOM数据，那么寻找性能肯定会有所提升。

将数据附加到元素

3 个答案: