Erstellen eines Arrays, das Schaltflächen speichert Klickpositionen

Question

Wenn ich ein 3 x 3 Raster von Schaltflächen (erstellt in einer HTML-Tabelle) habe, wie gehe ich in einem mehrdimensionalen Array die Koordinaten der Schaltfläche, die gedrückt wurde. Zum Beispiel habe ich ein Array:

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

Wenn ich auf der oberen linken Taste in dem Raster, würde es diese Position speichern [0] [0] zu diesem Elemente in der Anordnung. Wie würde ich das in JavaScript/jQuery machen?

HTML-Tabelle: https://jsfiddle.net/Amidi/ezLLk6qa/2/

Answer 1

Verwendung

Ich habe einfach basierend auf IDs von Tasten implementiert. Id sind als Rasterindex getrennt durch Unterstrich definiert.

können Sie die jsFiddle hier überprüfen: 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; 
} 

Answer 2

wäre es, dass die Position speichern [0] [0] zu diesem Element im Array

Wenn Sie sagen, es würde diese Position speichern [0] [ 0] bei diesem Element im Array ... Ich nehme an, Sie meinen die x, y Koordinaten des Mausklicks.

In diesem Fall, wenn Sie eine onclick= Methode auf jedem Ihrer Tasten setzen bestandener „grid_based“ Koordinaten wie:

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

Sie in der Lage sein zu tun, was du redest.

Wenn Sie einen anderen Wert speichern möchten - oder nur die Tatsache, dass die Grid-Schaltfläche angeklickt wurde, können Sie dies vereinfachen, indem Sie den Ereignisparameter entfernen und anArrayOfButtonClicks[grid_x][grid_y] auf etwas anderes setzen.

Answer 3

Versuchen .map(), .each() , .closest() , Index() ; using ID of button` als Eigenschaft des Objekts mit Array

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/