Question

我正在尝试完成以下任务。

我有一个“网格”，用户可以在其中“拥有”每个单元格。

要“拥有”一些新的单元格，用户应该能够在网格上单击两个点（直线），然后单击一个按钮进行确认，或者单击另一个按钮进行取消，这将更新状态的网格。 单击两个点时，两个单击的点之间的单元格必须更改颜色。

我应该指出，如果可能的话，我只想使用纯Javascript / PHP来实现这一目标。

我到目前为止所做的事情：

我已将“网格”存储在数据库中，并具有每个单元格的记录，其中包含位置（i，j），所有者和其他一些特征。
我使用PHP查询数据库，将所有内容保存在内存中（二维数组-网格应该很小），并通过生成HTML表来表示网格
我试图在单击时使用JS来更改单元格的颜色，但是遇到了问题（我是JS和Web编程的新手）。

我敢肯定，有某种模式可以做我想做的事情（肯定不是火箭科学），并且完全同意以下是纯意大利面条代码，但这是我考虑到的唯一方法经验非常有限。

我执行以下操作。我有一个名为div的HTML页面，其中表示表格

<div id="Vis_table"> <?php echo $table ?> </div>

在body的结尾处，我有一个脚本，并报告了其基本要素

var click = 0;
var grid = <?php echo json_encode($grid); ?>;
var Y_grid = <?php echo Y_g; ?>;


if (click == 0) { //first click
    var cells = document.getElementsByTagName("th"); //take all cells
    for (var i = 0; i < cells.length; i++) { // all rows
        var row = parseInt(i / (Y_grid)); //dimensions
        var col = i % (Y_grid);

        cells[i].onclick = (function (xr, yc, index) {
            return function () {
                if (click == 0) { //first click, start
                    var tab = "<table>";
                    for (var x = 0; x < grid.length; x++) {
                        tab += "<tr>";
                        for (var y = 0; y < grid[0].length; y++) {
                            if (x == xr && y == yc) { //if it's the cell i clicked on
                                tab += "<th class = 'clicked'>" + x + " " + y + "</th>";
                            } else {
                                tab += "<th class = 'free'> </th>";
                            }
                        }
                        tab += "</tr>";
                    }
                    tab += "</table>";
                    click = 1;
                    document.getElementById("Vis_table").innerHTML = tab;
                }
            };
        })(row, col, i);
    }
}

现在，这可以正常工作，并且单击的单元格会根据CSS规则更改颜色。问题是我不知道如何进行操作（即，给第一个和第二个单击的单元格之间的单元格上色）。

您有什么建议吗？

Answer 1

通过JS准备的表（在PHP中执行此操作是您的任务）。

JS中的区域标记：）

我将任务分为几个小步骤，以使其易于理解。如果您有任何疑问，请随时提问！

/* This is generated by PHP (for testing i do it with js here) >>> */
var rows = 5;
var cols = 10;
var $table = $('#myTable');

for( let row = 1; row <= rows; row++ ) {
  $row = $('<tr>');
  
  for( let col = 1; col <= cols; col++ ) {
    $col = $('<td>');
    $col.text(row + "|" + col);
    $col.attr('data-row', row);
    $col.attr('data-col', col);
    $row.append($col);
  }
  
  $table.append($row);
}
/* <<< */
var cells = [];

$('#myTable').click(function(e) {
  $cell = $(e.target);
  cells.unshift($cell);
  if(cells.length > 2) {
    cells.pop();
  }
  resetCells();
  markActiveCells();
  if ( cells.length == 2 ) {
    fillArea();
  }
});

function resetCells() {
  $('#myTable td').removeClass('active');
  $('#myTable td').removeClass('area');
}

function markActiveCells() {
  $(cells).each(function() {
    $(this).addClass('active');
  });
}

function fillArea() {
  if( cells.length < 2 ) return;
  
  start_row_cell = (cells[0].data('row') <= cells[1].data('row'))?0:1;
  start_col_cell = (cells[0].data('col') <= cells[1].data('col'))?0:1;
  
  start_row = cells[start_row_cell].data('row');
  end_row = cells[(start_row_cell+1)%2].data('row');
  
  start_col = cells[start_col_cell].data('col');
  end_col = cells[(start_col_cell+1)%2].data('col');

  for( let row = start_row; row <= end_row; row++ ) {
    for( let col = start_col; col <= end_col; col++ ) {
      $('#myTable td[data-row=' + row + '][data-col=' + col + ']').addClass('area');
    }
  }
}

td {
  font-size: 10px;
  width: 25px;
  height: 25px;
  background-color: #EEE;
  text-align: center;
}

td.active {
  background-color: #FA0 !important;
}

td.area {
  background-color: #FDA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" cellspacing=0></table>

根据数据库中的值更改单元格的颜色

1 个答案: