Javascript 向网格的每个单元格添加侦听器

我已经用下面的HTML代码创建了一个网格，我想知道是否可以使用jQuery向网格的每个单元格添加一个侦听器。网格是通过绘制一个框来绘制的，该框包含构成单个单元格框的水平线和垂直线。因此，目前每个单元都不是一个单独的元素。我想为每个单元格添加一个监听器（或者一个可以区分单元格的监听器），这样当我单击某个单元格时，该单元格会发生特定的事情

这在我当前的设置中可能吗？或者我可能需要改变创建网格的方式来实现这一点

<div class="grid-window" style="overflow: visible; top: 24px; left: 24px; right: 0px; bottom: 0px; height: 225px; width: 215px;">
    <div class="grid" style="height: 225px; width: 215px;">
    <div class="gridlines">
        <div class="vline" style="height: 225px; left: 0px;"></div>
        <div class="vline" style="height: 225px; left: 30.571428571428573px;"></div>
        <div class="vline" style="height: 225px; left: 61.142857142857146px;"></div>
        <div class="vline" style="height: 225px; left: 91.71428571428572px;"></div>
        <div class="vline" style="height: 225px; left: 122.28571428571429px;"></div>
        <div class="vline" style="height: 225px; left: 152.85714285714286px;"></div>
        <div class="vline" style="height: 225px; left: 183.42857142857144px;"></div>
        <div class="hline" style="width: 100%; top: 0px;"></div>
        <div class="hline" style="width: 100%; top: 16px;"></div>
        <div class="hline" style="width: 100%; top: 32px;"></div>
        <div class="hline" style="width: 100%; top: 48px;"></div>
        <div class="hline" style="width: 100%; top: 64px;"></div>
        <div class="hline" style="width: 100%; top: 80px;"></div>
        <div class="hline" style="width: 100%; top: 96px;"></div>
        <div class="hline" style="width: 100%; top: 112px;"></div>
        <div class="hline" style="width: 100%; top: 128px;"></div>
        <div class="hline" style="width: 100%; top: 144px;"></div>
        <div class="hline" style="width: 100%; top: 160px;"></div>
        <div class="hline" style="width: 100%; top: 176px;"></div>
        <div class="hline" style="width: 100%; top: 192px;"></div>
        <div class="hline" style="width: 100%; top: 208px;"></div>
        <div class="hline" style="width: 100%; top: 224px;"></div>
    </div>
    </div>
</div>

---

如果要构建网格，应使用带边框的表格或div

这样，您可以为每个表单元格或div分配一个id

---

就我个人而言，这是我构建表格的一次——只需为每个表格行指定高度

30.57px

，为每个列的宽度指定宽度

30.57px

——然后添加

边框：1px

作为一种样式，您将获得相同的效果。

如果您只想跟踪单击的网格

您可以计算和存储这些单元格的尺寸/边界，然后在单击时跟踪鼠标位置。简单函数将告诉您单击了哪个单元格

我认为最好改变结构，因为它不能很好地适应网格中的内容

这里的HTML结构很好，样式也很好：

还有一个HTML5插件可以添加网格，我不知道它是否对你的情况有帮助

---

为什么要以这种方式格式化它而不是使用

？嗯，这段代码是使用JavaScript（写入HTML）创建表的预编写代码集的一部分。我没有费心修改这部分代码。将此更改为一个函数会使添加侦听器更容易吗？当然！那么您所需要做的就是：$（“td”）。在（“单击”上，函数（事件）{}；