如果我有一个 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/