Question

我目前正在使用2d网格/阵列实现行程编码的可视化。您可以单击单元格将其变为黑色，否则保持白色。现在我要逐行计算黑色单元格。例如，假设“ b”是黑色单元格，“ w”是白色单元格

bbbbwwww -> 3b4w
wwwbbbbw -> 3w4b1w
bbbbbbbb -> 8b
wwwwwbbb -> 5w3b

这是生成单元格的代码

function generateGrid(rows, cols) {
  var grid = "<table>";
  for (row = 1; row <= rows; row++) {
    grid += "<tr>";
    for (col = 1; col <= cols; col++) {
      var cell = "<td> </td>";
      grid += cell;
    }
    grid += "</tr>";
  }
  $("#tableContainer").empty();
  $("#tableContainer").append(grid);
  $('td').click(function(){
    changeColor($(this))
  });
}
function changeColor(cell) {
  if(cell.hasClass('clicked')){
    cell.removeClass('clicked');
  } else {
  cell.addClass('clicked');
  }
}

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <style>
        body {
  background-color: whitesmoke;
}

#tableContainer {
  display: table;
  padding: 1px;
  margin-right: auto;
  margin-left: auto;
}

td {
  border: 1px solid;
  width: 50px;
  height: 50px;
  padding: .5px;
  background-color: white;
  display: table-cell;
  align-items: center;
  cursor: pointer;
}

td:hover {
  display: block;
  width: 100%;
  background-color: grey;
}

td.clicked {
  background-color: black;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="a3.css">
<script src="a3.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<body>
  <!-- <input type = "button" id="bClick" onclick="myFunction()"> -->
  <h1>Run Length Encoding Demonstration</h1>
 
  Rows: <input type="number" name="Rows" value=4 min=0 id="Rows"><br> Columns: <input type="number" name="Columns" value=4 min=0 id="Columns"><br><br>

  <button onclick="generateGrid(document.getElementById('Rows').value, document.getElementById('Columns').value)"> Generate </button>
  <button onclick="reloadPage()">Reload Page</button>
  <textarea id="Solution" cols="110" rows="4" placeholder="Here will be the encoded image data"></textarea>



  <div id="tableContainer"></div>

</body>

</html>

我是javascript新手。但是，如果我们更靠近黑色单元格，我们会发现它们包含“单击”类。我应该遍历所有td，并检查它们是否包含“ clicked”类并将其值存储在计数器变量中。这种方法行得通吗？

Answer 1

好吧，简单的答案是：是的，这样我就可以工作。

只需使用hasClass方法。

我可以想到的另一种方式是，由于每一行都是一个tr，因此对于每个tr都应有一个选择器，以选择所有具有td类的.clicked，然后计算结果。像这样的东西：trRow.find("td.clicked").length。一种非jQuery的方法可以是trRow.querySelectorAll("td.clicked").length。

如何逐行获取2D网格的黑色单元数？

1 个答案: