Question

如果我有一个3 x 3网格的按钮（在HTML表格中创建），我怎样才能在多维数组中存储按下的按钮的坐标。例如，我有一个数组：

var anArrayOfButtonClicks = anArray(3,3);
function anArray(row, col){
  a = [];
  for(var i=0; i < row; i++){
      a[i] = [];
    for(var j=0; j < col; j++){
        a[i][j] = null;
    }
  }return a;
}

当我点击网格中的左上角按钮时，它会将该位置[0] [0]存储在数组中的该元素上。我将如何在JavaScript / jQuery中执行此操作？

HTML表格：https://jsfiddle.net/Amidi/ezLLk6qa/2/

Answer 1

它会将位置[0] [0]存储在数组
中的那个元素上

当你说它会在数组中的那个元素存储位置[0] [0]时......我假设你的意思是鼠标点击的特定x，y坐标。

在这种情况下，如果你在每个按钮上放置一个onclick=方法，通过它们的“grid_based”坐标，如：

<button id="grid_button_0_0" onclick="handleGridButtonClick(event, 0, 0)" > </button> <script type='text/javascript'> function handleGridButtonClick(evt, grid_x, grid_y){ anArrayOfButtonClicks[grid_x][grid_y] = { screen_x: evt.screenX, screen_y: evt.screenY }; } </script>

你将能够做你正在谈论的事情。

如果您打算存储其他一些值 - 或者只是点击了网格地址按钮这一事实，您可以通过删除事件参数并将anArrayOfButtonClicks[grid_x][grid_y]设置为其他值来简化此操作。

Answer 2

尝试使用npm start，.each（）.map()。nearest（）, index（）, id ; using button`作为对象的属性阵列

＆＃13;

of

＆＃13;

var grid = $("table tr").map(function() {
  var obj = {}; 
  $("button", this).each(function(i, el) {
    obj[el.id] = [];
  });
  return obj
}).get();

$("tr button[id]").click(function(e) {
   var curr = $(this).closest("tr").index();
   grid[curr][this.id]
   .push([e.clientX, e.clientY]);
   alert(JSON.stringify(grid[curr][this.id]));
   console.log(grid);
})

＆＃13;

button{
  height: 30px;
  width: 30px;
}

＆＃13;

jsfiddle https://jsfiddle.net/ezLLk6qa/13/

Answer 3

我已经基于按钮的id实现了。 Id定义为以下划线分隔的网格索引。

您可以在此处查看jsFiddle：https://jsfiddle.net/ajaykedare/ezLLk6qa/14/

HTML：

var anArrayOfButtonClicks = Create2DArray(3);

storeAtIndex = function (id) {
var splitarray = id.split("_")
var i = splitarray[0]
var j = splitarray[1]
//Store value at that location
anArrayOfButtonClicks[i][j] = "Some value at index: "+i+j
//Check if value is stored successfully
alert("Does ele stored ?"+anArrayOfButtonClicks[i][j])
}

function Create2DArray(rows) {
  var arr = [];
  for (var i=0;i<rows;i++) {
     arr[i] = [];
  }
  return arr;
}

使用Javascript：

{{1}}

创建存储按钮单击位置的数组

3 个答案: