确定哪个 table 元素被按下

Question

我制作了一个 HTML table，现在我正在尝试更改被单击元素的背景颜色。问题是 table 元素的宽度不完全相同。当我按下某些元素的角时，它会将其解释为错误的。它并不总是将其解释为错误的，但我仍然希望它每次都能正常工作

var table = document.getElementById("table");

var wsquare = 25, hsquare = 25;

var w = window.innerWidth;
var h = window.innerHeight;

var m = parseInt(w / wsquare), n = parseInt(h / hsquare);
wsquare = w / m;
hsquare = h / n;

var col = [], pressed = [];
var starty = Math.floor(n / 2), startx = Math.floor(m / 3), endy = starty, endx = 2 * startx;

for(var i = 0; i < n; i++) {
  pressed[i] = [];
  col[i] = [];
  var row = table.insertRow(i);
  for(var j = 0; j < m; j++) {
    var cell1 = row.insertCell(j);
    col[i][j] = '#FFFFFF';
    pressed[i][j] = 0;
  }
}

var col = '#585858';

table.addEventListener('mousedown', e => {
  x = Math.floor(e.clientX / wsquare);
  y = Math.floor(e.clientY / hsquare);

  if(!pressed[y][x]) {
    table.rows[y].cells[x].style.backgroundColor = col;
    pressed[y][x] = 1;
  }
  else {
    table.rows[y].cells[x].style.backgroundColor = '#FFFFFF';
    pressed[y][x] = 0;
  }
});

th, table, td{
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="" id = "all">
    <div class="table">
      <table id= "table">
      </table>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Answer 1

试试这个。我在 table、th 和 td 中添加了一个 padding: 1px。

var table = document.getElementById("table");

var wsquare = 25, hsquare = 25;

var w = window.innerWidth;
var h = window.innerHeight;

var m = parseInt(w / wsquare), n = parseInt(h / hsquare);
wsquare = w / m;
hsquare = h / n;

var col = [], pressed = [];
var starty = Math.floor(n / 2), startx = Math.floor(m / 3), endy = starty, endx = 2 * startx;

for(var i = 0; i < n; i++) {
  pressed[i] = [];
  col[i] = [];
  var row = table.insertRow(i);
  for(var j = 0; j < m; j++) {
    var cell1 = row.insertCell(j);
    col[i][j] = '#FFFFFF';
    pressed[i][j] = 0;
  }
}

var col = '#585858';

table.addEventListener('mousedown', e => {
  x = Math.floor(e.clientX / wsquare);
  y = Math.floor(e.clientY / hsquare);

  if(!pressed[y][x]) {
    table.rows[y].cells[x].style.backgroundColor = col;
    pressed[y][x] = 1;
  }
  else {
    table.rows[y].cells[x].style.backgroundColor = '#FFFFFF';
    pressed[y][x] = 0;
  }
});

th, table, td{
  border: 1px solid black;
  border-collapse: collapse;
  padding: 1px; // Observe this padding
}

table {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="" id = "all">
    <div class="table">
      <table id= "table">
      </table>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Answer 2

我认为这是对某些扩展的修复：

// border-collapse: collapse -> remove
border-collapse: separate;
border-spacing: 0px;

现在边框比以前粗了一点，但也许您已经知道一个很好的解决方法:)

确定哪个 table 元素被按下

determine which table element is pressed

html

javascript

html-table

mouseclick-event