Javascript 用CSS在HTML中创建网格的最有效方法是什么？_Javascript_Jquery_Html_Css

Javascript 用CSS在HTML中创建网格的最有效方法是什么？

javascript jquery html css

Javascript 用CSS在HTML中创建网格的最有效方法是什么？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要创建一个网格，在每个单元格中应该有一个0或1。单击这些单元格时应在0和1之间切换。悬停时，应显示坐标（例如1,5）现在我唯一能做到这一点的方法就是创建三个div。一个用于单元格（包含数字），一个用于坐标（这一个是动态添加的），另一个div（包装器）将位于其他两个之上，而这一个将具有事件侦听器因此，我为cell创建了三个div，现在如果它用于10x10网格，这将非常有效，但是当它变得更大（64x64）时，浏览器开始冻结这是HTML查找网格单元格的方式： <div class="c

我需要创建一个网格，在每个单元格中应该有一个0或1。单击这些单元格时应在0和1之间切换。悬停时，应显示坐标（例如1,5）

现在我唯一能做到这一点的方法就是创建三个div。一个用于单元格（包含数字），一个用于坐标（这一个是动态添加的），另一个div（包装器）将位于其他两个之上，而这一个将具有事件侦听器

因此，我为cell创建了三个div，现在如果它用于10x10网格，这将非常有效，但是当它变得更大（64x64）时，浏览器开始冻结

这是HTML查找网格单元格的方式：

<div class="cell cellUnselected" id="cell_1_1" style="left: 0px; top: 0px;">0</div>
<div class="cellCoordinates cellCoordText" id="cell_1_1_coord" style="left: 0px; top: 0px;"></div>
<div class="cellWrapper" id="cell_1_1_wrapper" style="left: 0px; top: 0px;"></div>

您正在执行以下操作：

每个单元格创建三个
```
div
```
为每个
```
div
```
（
```
onclick
```
，
```
onmouseenter
```
/
```
onmouceleave
```
）创建三个处理程序。这是很多

通过执行以下操作，可以显著降低负载：

每个单元格创建两个

div

：一个带坐标（默认隐藏），第二个带值

不是为每个div附加事件处理程序，而是为整个表附加事件处理程序

事件处理程序应该依赖于

event.target

——它将包含值，它的邻居将包含坐标

事件处理程序应该执行它们在代码中实际执行的操作，但应该适用于目标div

需要处理的一点是：对于每个特定的div，都不会有

onmouseleave

；您应该在

事件之后运行类似于leave（prevDiv）
的操作。目标

已更改（考虑到您将

prevDiv

存储在事件处理程序的末尾）

祝你重构好运

有没有理由不使用表格呢？如果你的问题中有代码，这将更适合你；不在第三方链接中。浏览器冻结是由于复杂的HTML布局还是JavaScript侦听器的重量？关闭浏览器中的JS，如果需要，刷新以回答该问题。我投票赞成重新打开，但我同意，如果这主要是一个JS问题，那么应该在问题中提出有问题的JS。因此，如果链接断开，问题就不会变得无用。（在你之前的一个问题上，一条评论说：“请在你的问题中包含相关代码——而不仅仅是链接”）。您好，谢谢您的回答，您是否建议创建一个表，并在每个td中放置两个div（一个用于坐标，另一个用于值）然后将事件处理程序放到表中，并使用event.target获取值和坐标？我和你走同一条路吗？Thanks@vicgonzalez25是的，你是。事实上，无论是设计还是布局，都无关紧要。要点是：与将事件处理程序分配给每个单元格相比，将一个事件处理程序分配给整个表会减少浏览器负载。

<div id="grid" class="gridContainer">
    <div class="cell cellUnselected" id="cell_1_1" style="left: 0px; top: 0px;">0</div>
    <div class="cellCoordinates cellCoordText" id="cell_1_1_coord" style="left: 0px; top: 0px;"></div>
    <div class="cellWrapper" id="cell_1_1_wrapper" style="left: 0px; top: 0px;"></div>
    <div class="cell cellUnselected" id="cell_1_2" style="left: 36px; top: 0px;">0</div>
    <div class="cellCoordinates cellCoordText" id="cell_1_2_coord" style="left: 36px; top: 0px;"></div>
    <div class="cellWrapper" id="cell_1_2_wrapper" style="left: 36px; top: 0px;"></div>
</div>

<div id="gridLayout" class="gridLayout">
    <div id="gridHeader">
        <h2>Aperture Configuration:</h2>
        Grid Size:
        <input id="rows" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();">
        x
        <input id="cols" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();">
    </div>
    <div id="grid" class="gridContainer"></div>

    <div id="matrixHeader" style="position:absolute">
        <h2>Auto Correlation:</h2>
    </div>
    <div id="matrix" class="autocorrMatrixContainer"></div>
</div>

(function(GRASP, $){
    var GRID_ROWS,
        GRID_COLS,
        GRID_ELEMENT,
        MATRIX_ROWS,
        MATRIX_COLS,
        MATRIXHEADER_ELEMENT,
        MATRIX_ELEMENT,
        A,C;

    GRASP.config = {
        gridContainer: "grid",
        matrixContainer: "matrix",
        matrixHeader: "matrixHeader"
    };

    GRASP.start = function(){
        GRID_ROWS = $("#rows").val();
        GRID_COLS = $("#cols").val();
        MATRIX_ROWS = GRID_ROWS * 2 - 1;
        MATRIX_COLS = GRID_COLS * 2 - 1;
        createGrid();
        createAutocorrelationMatrix();
    };

    function createGrid()
    {
        GRID_ELEMENT = $("#"+GRASP.config.gridContainer);
        GRID_ELEMENT.html(""); // Clear Grid ;)
        var coord;
        var cell; // Contains the 1 or 0 based upon the cell selection

        for(var i=1; i<=GRID_ROWS; i++){
            for(var j=1; j<=GRID_COLS; j++){
                coord = "" + i + "," + j;

                $(document.createElement("div"))
                    .addClass("cellWrapper")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * 36, 10) + "px")
                    .css("top", parseInt((i-1) * 36, 10) + "px")
                    .width(36).height(36)
                    .data("row", i).data("col", j)
                    .appendTo("#"+GRASP.config.gridContainer)
                    .on("click", cellClick)
                    .on("mouseenter", {isMatrix: false}, cellMouseEnter)
                    .on("mouseleave", cellMouseLeave);

                $(document.createElement("div"))
                    .addClass("cell cellUnselected")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * 36, 10) + "px")
                    .css("top", parseInt((i-1) * 36, 10) + "px")
                    .text("0")
                    .appendTo("#"+GRASP.config.gridContainer);
            }
        }

        GRID_ELEMENT.height(36 * GRID_ROWS);
        GRID_ELEMENT.width(36 * GRID_COLS);

    }

    function createAutocorrelationMatrix() {
        MATRIXHEADER_ELEMENT = $("#" + GRASP.config.matrixHeader);
        MATRIX_ELEMENT = $("#" + GRASP.config.matrixContainer);
        MATRIX_ELEMENT.html("");

        MATRIXHEADER_ELEMENT.css("top", parseInt(GRID_ELEMENT.offset().top + (GRID_ROWS * 36)) + "px");
        MATRIX_ELEMENT.css("top", parseInt(MATRIXHEADER_ELEMENT.offset().top + MATRIXHEADER_ELEMENT.height()) + "px");

        var cellSize = Math.ceil((GRID_ROWS * 36) / MATRIX_ROWS);
        var coord;

        for (var i=1;i<=MATRIX_ROWS;i++){
            for (var j=1;j<=MATRIX_COLS;j++){
                coord = "" + i + "," + j;
                $(document.createElement("div"))
                    .addClass("autocorrMatrixCellWrapper")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * cellSize, 10) + "px")
                    .css("top", parseInt((i-1) * cellSize, 10) + "px")
                    .data("row", i).data("col", j)
                    .appendTo("#"+GRASP.config.matrixContainer)
                    .on("mouseenter", {isMatrix: true}, cellMouseEnter)
                    .on("mouseleave", cellMouseLeave);

                $(document.createElement("div"))
                    .addClass("autocorrMatrixCell autocorrMatrixCellUnselected")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * cellSize, 10) + "px")
                    .css("top", parseInt((i-1) * cellSize, 10) + "px")
                    .appendTo("#"+GRASP.config.matrixContainer);
            }
        }

        MATRIX_ELEMENT.height(36 * GRID_ROWS);
        MATRIX_ELEMENT.width(36 * GRID_COLS);
    }

    function cellClick(){
        var cell = $(this).next();

        if(cell.text() == "0"){
            cell.text("1");
        } else {
            cell.text("0");
        }
    }

    function cellMouseEnter(e){
        var i = $(this).data("row");
        var j = $(this).data("col");

        var x = e.data.isMatrix ? Math.ceil((GRID_ROWS * 36) / MATRIX_ROWS) : 36;

        var div = $(document.createElement("div"))
            .addClass("cellCoordinates cellCoordText")
            .css("left", parseInt((j-1) * x, 10) + "px")
            .css("top", parseInt((i-1) * x, 10) + "px")
            .text(i + ", " + j);

        $(this).before(div);
    }

    function cellMouseLeave(){
        $(this).prev().remove();
    }

}(window.GRASP = window.GRASP || {}, jQuery));

$(document).ready(function(){
    GRASP.start();
});

.gridContainer {
/*  width: inherit; */
/*  float: left; */
    position: relative;
    top: 10px;
    padding: 0 0 0 0;
    display: block;
    background: none;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

.cell {
    width: 36px;
    height: 36px;
    position: absolute;
    z-index: 0;

/*
    font-size: 16pt;
*/
    font-size: x-large;
    font-weight: normal;
    font-style: normal;
    color: #888888;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    line-height: 2em;
/*  padding-top: 0.25em; */
}

.cellSelected {
    background: #00CCFF;
}

.cellUnselected {
    background: none;
}

.cellCoordinates {
    width: 36px;
    height: 36px;
    position: absolute;
    background: none;
    z-index: 1;
}
.autocorrMatrixContainer {
    position: absolute;
/*    float: left; */
/*    bottom: 0px; */
    display: block;
    background: none;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

.autocorrMatrixCell {
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 0;
    font-size: xx-small;
    font-weight: normal;
    font-style: normal;
    color: #FFFFFF;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    line-height: 2em;
/*  padding-top: 0.25em; */
}

.autocorrMatrixCellWrapper {
    width: 16px;
    height: 16px;
    position: absolute;
    background: none;
    z-index: 2;
    border-style: solid outset;
    border-width: 1px;
    border-color: black;
    font-size: x-small;
}

.autocorrMatrixCellCoordText {
    font-size: xx-small;
    font-weight: normal;
    font-style: normal;
    padding-top: 2px;
    padding-left: 3px;
    color: #444444;
    text-align: left;
    vertical-align: top;
}
.cellWrapper {
    width: 36px;
    height: 36px;
    position: absolute;
    background: none;
    z-index: 2;
    border-style: solid outset;
    border-width: 1px;
    border-color: black;
    font-size: normal;
}

.cellCoordText {
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    padding-top: 2px;
    padding-left: 3px;
    color: #444444;
    text-align: left;
    vertical-align: top;
}