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

Creating array that stores button click locations

本文关键字：数组 位置 单击 存储 按钮 创建      更新时间：2023-11-24

如果我有一个 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中做到这一点？

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

我只是基于按钮的id来实现的。Id 定义为由下划线分隔的网格索引。

你可以在这里检查jsFiddle：https://jsfiddle.net/ajaykedare/ezLLk6qa/14/

.HTML：

<table>
<tr>
<td><button id="0_0" onclick="storeAtIndex(id);"></button></td>
<td><button id="0_1" onclick="storeAtIndex(id);"></button></td>
<td><button id="0_2" onclick="storeAtIndex(id);"></button></td>
</tr>
<tr>
<td><button id="1_0" onclick="storeAtIndex(id);"></button></td>
<td><button id="1_1" onclick="storeAtIndex(id);"></button></td>
<td><button id="1_2" onclick="storeAtIndex(id);"></button></td>
</tr>
<tr>
<td><button id="2_0" onclick="storeAtIndex(id);"></button></td>
<td><button id="2_1" onclick="storeAtIndex(id);"></button></td>
<td><button id="2_2" onclick="storeAtIndex(id);"></button></td>
</tr>
</table>

Javascript：

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;
}

它会将该位置 [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]设置为其他内容来简化此操作。

尝试使用 .map() ， .each(( , .closest(( , index(( ; using id of button' 作为带有数组的对象的属性

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);
})
button{
  height: 30px;
  width: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tr>
<td><button id="a0"></button></td>
<td><button id="a1"></button></td>
<td><button id="a2"></button></td>
</tr>
<tr>
<td><button id="b0"></button></td>
<td><button id="b1"></button></td>
<td><button id="b2"></button></td>
</tr>
<tr>
<td><button id="c0"></button></td>
<td><button id="c1"></button></td>
<td><button id="c2"></button></td>
</tr>
</table>

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

相关文章：