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)
}
}
}
Related
I've been trying to get this data, but the array comes out empty:
function saveData() {
var tableData = [];
var table = document.getElementById("dtable");
console.log(table)
for (var i = 0; i < table.length; i++) {
let tableCells = table.rows.item(i).cells;
let cellLength = tableCells.length;
for (let j = 0; j < cellLength; j++) {
let cellVal = tableCells.item(j).innerHTML;
tableData.push(cellVal)
}
}
console.log(tableData)
rows = JSON.stringify(tableData);
google.script.run.formToSheets(rows);
}
Thanks for any help!
In your script, as one of several possible modifications, how about the following modification?
From:
var tableData = [];
var table = document.getElementById("dtable");
console.log(table)
for (var i = 0; i < table.length; i++) {
let tableCells = table.rows.item(i).cells;
let cellLength = tableCells.length;
for (let j = 0; j < cellLength; j++) {
let cellVal = tableCells.item(j).innerHTML;
tableData.push(cellVal)
}
}
console.log(tableData)
To:
var table = document.getElementById("dtable");
console.log(table)
var [, ...tr] = table.querySelectorAll("tr");
var tableData = [...tr].map(r => {
var td = r.querySelectorAll("td");
return [...td].map((c, j) => j != 3 ? c.innerHTML : c.querySelectorAll("select")[0].value);
});
console.log(tableData)
In this modification, from a table, the table rows are retrieved. And, the table cells are retrieved from the table rows. In teh case of the dropdown list, the value is retrieved from the dropdown list.
Note:
When this modification was not the direct solution to your issue, I think that when you provide your whole script, it will help to correctly understand your question.
I'm making a battleship game implementation with HTML/JavaScript. This function is supposed to add the positions of the ships on an HTML table by copying the elements from a 2d array(p1Board) with the positions of the ships.
let displayTable = () => {
document.getElementById("player1turn").hidden = true;
let table = document.getElementById("player1board");
for(var i = 1; i < table.rows.length; i++){
for(var j = 1; j < table.rows.cells; j++){
table.rows[i].cells[j].innerHTML = p1Board[i - 1][j - 1];
}
}
document.getElementById("player1table").hidden = false;
}
document.getElementById("p1start").addEventListener("click", displayTable);
Then, when I open the program on my browser, the table appears but without the positions of the ships:
[Battleship Board][1]
[1]: https://i.stack.imgur.com/Nv1kA.png
The problem is that you are not specifying the row from which you want to get the cells. Also, once you get the cells, you need to access their .length property.
Change this line
for(var j = 1; j < table.rows.cells; j++)
for this
for(var j = 1; j < table.rows[i].cells.length; j++)
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.
I am in the process of adapting the code below to insert a full row after function get emails is run. the extra row function works so i thought i would add line to the end of the getEmails. But it adds around 30 extra rows, i only need one added.
sheet.insertRows(2)
below is the getEmail code.
function getEmails() {
var label = GmailApp.getUserLabelByName("pollux");
var threads = label.getThreads();
var row = 3;
for (var i = 0; i < threads.length; i++) {
var messages=threads[i].getMessages();
for (var m=0; m < messages.length; m++) {
sheet.getRange(row,1).setValue(messages[m].getPlainBody());
row++;
sheet.insertRows(2);
some helpful suggestions would be great.
Cheers Mark
Remove this line sheet.insertRows(2);
and place outside this for loop
for (var i = 0; i < threads.length; i++) {
Changed code to
function getEmails() {
var label = GmailApp.getUserLabelByName("pollux");
var threads = label.getThreads();
var row = 3;
sheet.insertRows(2);
for (var i = 0; i < threads.length; i++) {
var messages=threads[i].getMessages();
for (var m=0; m < messages.length; m++) {
sheet.getRange(row,1).setValue(messages[m].getPlainBody());
row++;
now adds line and moves row down as 1 as i need.
how to insert values in a html table, an array multidimensional in javascript.
Additionally, such as performing calculations between the columns of the array and insert the results into a column of the same array.
thanks for your answers.
Javascript code:
var multiArray;
window.onload = function() {
// load the table into the multidimensional array.
multiArray = [];
var trs = document.getElementsByTagName('TR');
for(var i = 0; i < trs.length; i++) {
var arr = [];
var tds = trs[i].childNodes;
for(var j = 0; j < tds.length; j++) {
var td = tds[j];
if (td.tagName === 'TD') {
arr.push(td.innerHTML);
}
}
multiArray.push(arr);
}
// perform some calculations between the columns of the array
var resCalc = [];
for(i = 0; i < multiArray.length; i++) {
resCalc[i] = 0;
for(j = 0; j < multiArray[i].length; j++) {
resCalc[i] += multiArray[i][j];
}
}
// insert the results into a column of the same array
var columnToModify = 0; // the index of the column you want to change
for(i = 0; i < multiArray.length; i++) {
multiArray[i][columnToModify] = resCalc[i];
}
};
something on Google…
http://www.eggheadcafe.com/community/aspnet/3/10003047/html-table-in-to-an-array.aspx