Trouble adding 2d array contents on an HTML table - javascript

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

Related

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

how to write a XML data 2 Dimensional Array

the snippt shows the XML detail : please referes to the image, shows the table...
<ExtractSummaryDateSet>
<_date>2017-09-20</_date>
<_portfolioSummaries>
<ExtractSummaryDateSetDetail>
<_portfolioName>52613661_CL</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
<ExtractSummaryDateSetDetail>
<_portfolioName>52613661_LP</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
<ExtractSummaryDateSetDetail>
<_portfolioName>526136|Total</_portfolioName>
<_detail>
<Before>0</Before>
<After>-329</After>
<ChangeMaturing>0</ChangeMaturing>
<ChangeNew>-329</ChangeNew>
</_detail>
</ExtractSummaryDateSetDetail>
I am trying to use 2 Dimential arrays in XML to create a table HTML
for (var i = 0; i < x.length; i++){
var row= x[i];
var date = row.getElementsByTagName("Date")[0].childNodes[0].nodeValue;
for(var j = 0;j < row.length; j++){
var before = row[j].getElementsByTagName("Before")[0].childNodes[0].nodeValue;
var after = row[j].getElementsByTagName("after")[0].childNodes[0].nodeValue;
}
}
just wanna know is the example above semantically correct?
in the second array can i use row[j] to call the array
for (var y = 0; y < x.length; y++){
for (var i = 0; i < x[i].length; i++){
table_summary +="<th></th><th></th><td>" + x[y][j].getElementsByTagName("_date")[0].childNodes[0].nodeValue + "</td>" ;
}
how do I pass the value correctly? x[y][i] can't not find the value.

I am working on XML format in web application and encounter to similar your issue. You can transform XML to HTML like your method but create HTML tags from XML is very cumbersome.
I suggest you use XSLT for this transform.
I created a simple XSLT for your XML and converted this transform very easily.
Please see Online transform and click html in result panel to see HTML output for your XML.

You can consider a multi dimensional array as an array of arrays.
so this is fine :
for (var i = 0; i < x.length; i++){
var row= x[i]
for(var j = 0;j < row.length; j++){
var before = row[j];
}
}
However you can also write this as :
for (var i = 0; i < x.length; i++) {
for(var j = 0;j < x[i].length; j++) {
var before = x[i][j];
}
}

Populate a three dimensional array vector JavaScript

I have a three dimensional array that represents a game Board. A traditional 2D for lines and columns and a third dimension because each cell can be a stack. SOmething like this:
[[[#],[b,#],[b,w,b,b,b,#],[b,#],[b,w,w,b,#]],[[b,#],[b,b,#],[b,b,w,#],[b,b,b,#],[b,b,#]],[[b,#],[b,b,b,b,#],[b,w,#],[b,b,b,#],[b,#]],[[b,#],[b,#],[w,w,w,#],[b,b,w,w,#],[b,w,#]],[[b,#],[b,b,b,b,#],[b,w,b,#],[b,w,#],[b,b,#]]]
I've already parsed and now it represents my board variable.
Then I did this:
this.stacks = [];
gameBoard.prototype.loadTiles = function(board){
this.tiles = [];
for(var i=0; i<board.length; i++) {
for (var j = 0; j < board[i].length; j++) {
var stack = board[i][j];
var player = board[i][j].slice(-1)[0];
this.stacks.push(stack);
}
}
this.createTiles(this.stacks);
};
And now my this.stacks is a vector with all my stacks.
The thing is, I need to create the tiles, the things that form the stack, like poker chips!So I did something like this:
gameBoard.prototype.createTiles = function(tiles) {
for(var i=0; i<tiles.length; i++) {
var stack = tiles[i];
for(var j=0; j< stack.length; j++) {
var type = stack[j];
//console.log("TYPE" + type);
var player = stack[stack.length - 1];
//console.log("PLAYER" + player);
this.stackPiles = this.createTile(type, this.scene, i*6 + j+100, player);
}
}
And here's the problem I think. I need to call a display function on my tiles, but I need them grouped by lines, columns and stacks to fill my 5x5 matrix properly:
for (var i = 0; i < this.matrix.length; i++) {
this.matrix[i] = new Array(5);
}
for (var i = 0; i < this.matrix.length; i++) {
for (var j = 0; j < this.matrix.length; j++) {
//this.matrix[i][j] = new gamePiece(scene, 1 + i*this.matrix.length + j);
}
}
How do I do that. How do I create the tiles from every element on my stacks array and then put them on my 2D matrix in order to call the display function on (again) every element?
Thank you,
Regards

Reading multi-dimensional arrays - Javascript

I'm having some issues on how to read arrays.
console.log(arr[i][j]); -- Can someone explain how the i and j fit into this. I'm printing the array i and j to the console, correct?
function multiplyAll(arr) {
var product = 1;
// Only change code below this line
var i = 0;
var j = 0;
for (i = 0; i < arr.length; i++ ) {
for (j = 0; j < arr[i].length; j++) {
console.log(arr[i][j]);
product *= arr[i][j];
}
}
// Only change code above this line
return product;
}
// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);

You are printing the j-th element of the i-th array to the console.

Create a Javascript table that we can see

I would like to create a table that is entirely generated by Javascript; however I never did that and I searched a lot on the internet and I don't get how its supposed to works! For example I would want a 3 row and 4 columns table that would display when loading the page with information I would choose to put in it.

This is the code that you need...
var arr = new Array(2);// numbers of columns
for (i = 0; i < arr.length; i++) {
arr[i]=new Array();
}
arr[0] = new Array("a", "b", "c");//first column
arr[1] = new Array(1,2, 3);//second column
document.write('<table border="1">');
for (i = 0; i < arr.length; i++) {
document.write("<tr>");
for (j = 0; j < arr[0].length; j++) {
document.write("<td>"+arr[i][j]+"</td>");
}
document.write("</tr>");
}
you choose the imput

Categories

Resources