Question

我创建了一个包含以下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>

Answer 1

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

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

就个人而言，这是我构建表格的时间之一 - 只需为每个表格行指定30.57px的高度，为每列的宽度指定30.57px的宽度 - 然后添加{{ 1}}作为一种风格，你会有同样的效果。

Answer 2

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

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

我认为最好改变结构，因为网格中的内容不会太好用。

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

http://www.webdesignerdepot.com/2014/01/how-to-create-a-slidable-grid-with-jquery/

有一个HTML 5插件可以添加网格，但不知道它是否会对你的情况有所帮助。

http://jquerygrid.net/

将侦听器添加到网格的每个单元格

2 个答案: