Develop Reference

Get Coordinates of a Table Cell in JavaScript

I am working on a maze generating algorithm visualisation in JavaScript, I made a 5x5 grid but now I require that whenever i click a table cell(), I get its coordinates i.e in which row it is and in which column. How would I go about implementing this?
Here's what im doing right now:
cell.onclick = function() {
console.log(this)
}
Here's how Im generating the cells and rows:
for(let i = 0; i < rows; i++) {
let row = grid.insertRow();
for (let j = 0; j < columns; j++) {
let cell = row.insertCell()
}}
Edit: I played around with the code and implemented MauriceNino's solution.
Here's the code:
for(let i = 0; i < rows; i++) {
let row = grid.insertRow();
for (let j = 0; j < columns; j++) {
let cell = row.insertCell()
cell.row = i
cell.column = j
cell.onclick = function(evt) {
console.log(cell.row + 1)
console.log(cell.column + 1)
}
}
}

Google Sheets script to clear checkboxes across multiple tabs

I have a spreadsheet with 16 tabs. Each tab is the same format. All tabs have checkboxes in column A.
I am attempting to create a button that will clear ALL checkboxes on every tab.
I created a button and assigned this script...
function myFunction() {
var sheet = SpreadsheetApp.getActiveSheet();
var dataRange = sheet.getRange('A3:A');
var values = dataRange.getValues();
for (var i = 0; i < values.length; i++) {
for (var j = 0; j < values[i].length; j++) {
if (values[i][j] == true) {
values[i][j] = false; // Modified
}
}
}
dataRange.setValues(values);
}
It clears the checkboxes only on the tab that the button exists on.
How do I modify this script to clear checkboxes across ALL tabs with one click?

Never done any google sheets scripting but I see this function getSheets() that might be useful? https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet#getSheets()
Could try iterating through all the sheets that way, something like:
function myFunction() {
var sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
for (var i = 0; i < sheets.length; i++) {
var dataRange = sheets[i].getRange('A3:A');
var values = dataRange.getValues();
for (var j = 0; j < values.length; j++) {
for (var k = 0; k < values[j].length; k++) {
values[j][k] = false;
}
}
dataRange.setValues(values);
}
}

Cant select html elements created as a template with javascript

I created a table with java script, of rows and cols, basically a template for seats, but when I try to select the html elements, using document.getELementbyclassname, I get undefined. I am using every in j query $(document).ready(function), still I get undefined.
function createTemplate(rows,cols){
var rows = rows;
var col = cols;
for(var i = 0; i < rows; i++){
$("#container").append("<div class = 'row rower'></div>");
}
for(var y = 0; y < col; y++){
$(".rower").append("<div class = 'col-xs-1 cols'> </div>");
}
for(var z = 0; z < 1; z++){
$(".cols").append("<button class = 'btn btn-danger proness'></button>");
}
var buttons = document.getElementsByClassName("proness");
for(var l = 0; l < buttons.length; l++){
buttons[l].innerHTML = l;
}
var row = document.getElementsByClassName("rower");
for(var x = 0; x < row.length;x++)
{
row[x].style.padding = "1px";
}
};
Now, after i use
var button = document.getElementByClassName("btn");
console.log(button[3]); // UNdefined

Since you're using jquery already, you can use jquery to address the buttons.
Fiddle: https://jsfiddle.net/j6ju2cxs/
var buttons = $(".btn");
console.log($(buttons[3]).html());
If the number of cells that result from the rows and columns input into your function is less than 3, looking for buttons[3] will return undefined.

How to get id from an innerHTML in javascript?

I have written the following function.
There are controls inside Table which is inside a div.
I need to print id of all the controls
function getID() {
debugger;
var ids = [];
var children = document.getElementById("divAlarmSection").children;
for (var i = 0, len = children.length; i < len; i++) {
ids.push(children[i].id);
var table = document.getElementById(children[i].id);
var rows = table.rows;
for (i = 0, n = rows.length; i < n; ++i) {
var cells = rows[i].getElementsByTagName('td');
for (var x = 0; x < cells.length; x++) {
if (cells[x].length != 0) {
alert(cells[x].innerHTML);
}
}
}
}

use .getElementsByTagName("*") on cells[x] and access 'ID' property of the result. So your last 'for' loop becomes:
var elements = cells[x].getElementsByTagName("*")
for(var len=0;len<elements.length;len++)
console.log(elements[len].id);
Also, if you know the inner structure of each 's and its consistent, you can look for that element in .getElementsByTagName()

checking data attribute in a array

I have a list of events on a page. My end goal is to hide a purchase button (by adding a class to it) if the event has passed, using JQuery/Javascript. Each event has a 3 data attributes(month, day, year). I tried using the following method to cycle through an array:
var matches = document.querySelectorAll(".event-event");
var i = 0;
for (i = 0; i < matches.length; i++) {
var event = matches[i].getElementsByClassName('date');
var eventDate = event.getAttribute('data-date');
}
But it says that "getAttribute" is not a function, I've also tried ".attr" and it said the same thing.

var matches = document.querySelectorAll(".event-event");
for (var i = 0; i < matches.length; i++) {
var event = matches[i].getElementsByClassName('date');
if (event.length > 0) {
for (var j = 0; j < event.length; j++) {
var eventDate = event[i].getAttribute('data-date');
}
}
}

The getElementsByClassName method returns an array.

Try this:
var matches = document.querySelectorAll(".event-event");
for (var i = 0; i < matches.length; i++) {
var events = matches[i].getElementsByClassName('date');
for(var j = 0; j < events.length; j++) {
var eventDate = events[j].getAttribute('data-date');
}
}
events is an array that you must iterate through.