Массив объектов Javascript в виде табличных данных

ProgramBox

Массив объектов Javascript в виде табличных данных

Post author:admin
Запись опубликована:3 апреля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Я работаю над чистой игрой в стиле сетки JS 6×6, в которой каждая ячейка сетки должна чередоваться между 3 цветами (по одному за раз) при нажатии один раз. Я сталкиваюсь с двумя проблемами: я хотел бы отображать каждую ячейку пустой, просто содержащей цвет, но, похоже, я не могу заставить это работать без необходимости отображения текста в ячейке.

Я также пытаюсь найти способ «переключения» между тремя цветами. Мое использование переключения работает для двух цветов, но я не совсем уверен, могу ли я добавить третий вариант, поскольку он, похоже, работает на основе true / false.

Могу ли я каким-либо образом отобразить здесь «пустую» ячейку? Должен ли я отказаться от своего метода атаки для изменения цветов? Прошу прощения, если мой код повсюду, я слишком долго смотрел на это.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    <style>
.blue {
  background-color: blue;
}
.grey{
background-color:grey;
}
td {
  text-align: center;
  border: 1px solid black;
  padding: 3px;
  height: 50px;
  width: 50px;
}
table {
  border-collapse: collapse;
}
.tile {
  cursor: pointer;
}
    </style>
</head>
<body>
    <script>

    //6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);

    //6x6 array
var userArray = new Array(6);
userArray[0] = new Array(6);
userArray[1] = new Array(6);
userArray[2] = new Array(6);
userArray[3] = new Array(6);
userArray[4] = new Array(6);
userArray[5] = new Array(6);

var tile = {colour1:blue, colour2:white, colour3:grey};
var z = "";
var blue = tile.colour1 = "blue";
var white = tile.colour2 = "white";
var grey = tile.colour = "grey";

solutionArray[0][0] = blue;
solutionArray[0][1] = white;
solutionArray[0][2] = blue;
solutionArray[0][3] = blue;
solutionArray[0][4] = white;
solutionArray[0][5] = blue;

solutionArray[1][0] = white;
solutionArray[1][1] = blue;
solutionArray[1][2] = white;
solutionArray[1][3] = blue;
solutionArray[1][4] = blue;
solutionArray[1][5] = white;

solutionArray[2][0] = blue;
solutionArray[2][1] = white;
solutionArray[2][2] = blue;
solutionArray[2][3] = white;
solutionArray[2][4] = white;
solutionArray[2][5] = blue;

solutionArray[3][0] = white;
solutionArray[3][1] = blue;
solutionArray[3][2] = white;
solutionArray[3][3] = white;
solutionArray[3][4] = blue;
solutionArray[3][5] = blue;

solutionArray[4][0] = blue;
solutionArray[4][1] = blue;
solutionArray[4][2] = white;
solutionArray[4][3] = blue;
solutionArray[4][4] = white;
solutionArray[4][5] = white;

solutionArray[5][0] = blue;
solutionArray[5][1] = white;
solutionArray[5][2] = blue;
solutionArray[5][3] = white;
solutionArray[5][4] = blue;
solutionArray[5][5] = white;

//USER ARRAY
userArray[0][0] = blue;
userArray[0][1] = grey;
userArray[0][2] = grey;
userArray[0][3] = grey;
userArray[0][4] = grey;
userArray[0][5] = blue;

userArray[1][0] = grey;
userArray[1][1] = blue;
userArray[1][2] = grey;
userArray[1][3] = grey;
userArray[1][4] = grey;
userArray[1][5] = white;

userArray[2][0] = grey;
userArray[2][1] = grey;
userArray[2][2] = blue;
userArray[2][3] = grey;
userArray[2][4] = white;
userArray[2][5] = grey;

userArray[3][0] = grey;
userArray[3][1] = grey;
userArray[3][2] = grey;
userArray[3][3] = grey;
userArray[3][4] = grey;
userArray[3][5] = grey;

userArray[4][0] = grey;
userArray[4][1] = grey;
userArray[4][2] = white;
userArray[4][3] = grey;
userArray[4][4] = grey;
userArray[4][5] = white;

userArray[5][0] = grey;
userArray[5][1] = grey;
userArray[5][2] = grey;
userArray[5][3] = grey;
userArray[5][4] = blue;
userArray[5][5] = white;

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < 6; i  ) {
  //output the row tag
  var y = document.createElement("TR");
  y.setAttribute("id", "row"   i);
  document.getElementById("gridTable").appendChild(y)

  for (j = 0; j < userArray.length; j  ) {

    ///output the td tag
    var z = document.createElement("TD");
    if (userArray[i][j] == blue) {
      z.setAttribute("class", "blueTile tile blue");
    } else if (userArray[i][j] == white) {
      z.setAttribute("class", "blueTile tile");
    } else if (userArray[i][j] == grey) {
      z.setAttribute("class", "blueTile tile grey");
    }
    var t = document.createTextNode(userArray[i][j]);
    z.appendChild(t);
    document.getElementById("row"   i).appendChild(z);

  }

}

document.querySelector("#gridTable").addEventListener("click", function(event) {
  if (event.target.tagName === "TD" amp;amp; event.target.classList.contains("blueTile")) {
    event.target.classList.toggle("blue");
  }
});
document.querySelector("#gridTable").addEventListener("click", function(event) {
  if (event.target.tagName === "TD" amp;amp; event.target.classList.contains("blueTile")) {
    event.target.classList.toggle("grey");
  }
    });



    </script>

    </body>
    </html>

Ответ №1:

Первая проблема: вы должны добавить «пустые ячейки: показать» в тег таблицы (это необходимо для некоторых браузеров).
Вторая проблема: просто используйте простую логику. используемая вами функция переключения не предназначена для ваших целей. Смотрите код ниже. В целом весь код можно было бы значительно оптимизировать.

Я протестировал этот код, и обе проблемы решены:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
    <style>
.blue {
  background-color: blue;
}
.grey{
background-color:grey;
}

.white{
background-color:white;
}
td {
  text-align: center;
  border: 1px solid black;
  padding: 3px;
  height: 50px;
  width: 50px;
}
table {
  border-collapse: collapse;
  empty-cells: show;
}
table td {
  cursor: pointer;
}
    </style>
</head>
<body>
    <script>

    //6x6 array
var solutionArray = new Array(6);
solutionArray[0] = new Array(6);
solutionArray[1] = new Array(6);
solutionArray[2] = new Array(6);
solutionArray[3] = new Array(6);
solutionArray[4] = new Array(6);
solutionArray[5] = new Array(6);

    //6x6 array
var userArray = new Array(6);
userArray[0] = new Array(6);
userArray[1] = new Array(6);
userArray[2] = new Array(6);
userArray[3] = new Array(6);
userArray[4] = new Array(6);
userArray[5] = new Array(6);

var tile = {colour1:blue, colour2:white, colour3:grey};
var z = "";
var blue = tile.colour1 = "blue";
var white = tile.colour2 = "white";
var grey = tile.colour = "grey";

solutionArray[0][0] = blue;
solutionArray[0][1] = white;
solutionArray[0][2] = blue;
solutionArray[0][3] = blue;
solutionArray[0][4] = white;
solutionArray[0][5] = blue;

solutionArray[1][0] = white;
solutionArray[1][1] = blue;
solutionArray[1][2] = white;
solutionArray[1][3] = blue;
solutionArray[1][4] = blue;
solutionArray[1][5] = white;

solutionArray[2][0] = blue;
solutionArray[2][1] = white;
solutionArray[2][2] = blue;
solutionArray[2][3] = white;
solutionArray[2][4] = white;
solutionArray[2][5] = blue;

solutionArray[3][0] = white;
solutionArray[3][1] = blue;
solutionArray[3][2] = white;
solutionArray[3][3] = white;
solutionArray[3][4] = blue;
solutionArray[3][5] = blue;

solutionArray[4][0] = blue;
solutionArray[4][1] = blue;
solutionArray[4][2] = white;
solutionArray[4][3] = blue;
solutionArray[4][4] = white;
solutionArray[4][5] = white;

solutionArray[5][0] = blue;
solutionArray[5][1] = white;
solutionArray[5][2] = blue;
solutionArray[5][3] = white;
solutionArray[5][4] = blue;
solutionArray[5][5] = white;

//USER ARRAY
userArray[0][0] = blue;
userArray[0][1] = grey;
userArray[0][2] = grey;
userArray[0][3] = grey;
userArray[0][4] = grey;
userArray[0][5] = blue;

userArray[1][0] = grey;
userArray[1][1] = blue;
userArray[1][2] = grey;
userArray[1][3] = grey;
userArray[1][4] = grey;
userArray[1][5] = white;

userArray[2][0] = grey;
userArray[2][1] = grey;
userArray[2][2] = blue;
userArray[2][3] = grey;
userArray[2][4] = white;
userArray[2][5] = grey;

userArray[3][0] = grey;
userArray[3][1] = grey;
userArray[3][2] = grey;
userArray[3][3] = grey;
userArray[3][4] = grey;
userArray[3][5] = grey;

userArray[4][0] = grey;
userArray[4][1] = grey;
userArray[4][2] = white;
userArray[4][3] = grey;
userArray[4][4] = grey;
userArray[4][5] = white;

userArray[5][0] = grey;
userArray[5][1] = grey;
userArray[5][2] = grey;
userArray[5][3] = grey;
userArray[5][4] = blue;
userArray[5][5] = white;

var x = document.createElement("TABLE");
x.setAttribute("id", "gridTable");
document.body.appendChild(x);

for (i = 0; i < 6; i  ) {
  //output the row tag
  var y = document.createElement("TR");
  y.setAttribute("id", "row"   i);
  document.getElementById("gridTable").appendChild(y)

  for (j = 0; j < userArray.length; j  ) {

    ///output the td tag
    var z = document.createElement("TD");
    if (userArray[i][j] == blue) {
      z.setAttribute("class", "blue");
    } else if (userArray[i][j] == white) {
      z.setAttribute("class", "white");
    } else if (userArray[i][j] == grey) {
      z.setAttribute("class", "grey");
    }
    document.getElementById("row"   i).appendChild(z);

  }
}

document.querySelector("#gridTable").addEventListener("click", function(event) {
  if(event.target.classList.contains("blue")){
	event.target.className = 'grey';
  }else if(event.target.classList.contains("grey")){
	event.target.className = 'white'
  }else if(event.target.classList.contains("white")){
	event.target.className = 'blue'
  }
});
    </script>
  </body>
</html>

Ответ №2:

Если вам понадобилось более 3 цветов, вы могли бы использовать массив и циклически просматривать его. Обратите внимание, что в следующем примере я использовал атрибут class и data для разделения логики между представлением и данными, но здесь это совершенно неуместно, поскольку класс и данные одинаковы (т. Е. Синий, серый, белый). Я просто поместил это здесь для рекомендаций на случай, если классы выглядят как ‘blueTile’ ‘greyTile’, и в этом случае вам придется использовать объекты для хранения как названия цвета, так и связанного с ним класса. Я также немного изменил css.

Это может выглядеть следующим образом (полный рабочий пример на jsfiddle)

 var z = "";
var blue = "blue";
var white = "white";
var grey = "grey";
var colours = [blue, white, grey];

...


for (i = 0; i < 6; i  ) {
  //output the row tag
  var y = document.createElement("TR");
  y.setAttribute("id", "row"   i);
  document.getElementById("gridTable").appendChild(y)

  for (j = 0; j < userArray.length; j  ) {

    ///output the td tag
    var z = document.createElement("TD");

    z.classList.add('tile');
    setElementColour(z, userArray[i][j]);
    var t = document.createTextNode(userArray[i][j]);
    z.appendChild(t);
    document.getElementById("row"   i).appendChild(z);

  }

}

document.querySelector("#gridTable").addEventListener("click", function(event) {
    cycleElementColour(event.target);
});


function setElementColour(element, colour) {
    setElementColourClass(element, colour);
    setElementColourData(element, colour);
}


function setElementColourData (element, colour) {
    var elementColour = element.getAttribute('data-colour');
    if (elementColour === colour) {
        return;
    }

    element.setAttribute('data-colour', colour);
}


function setElementColourClass (element, colour) {
    colours.forEach(function (colour) {
        element.classList.remove(colour);
    });

    element.classList.add(colour);
}


function cycleThroughValues(currentValue, availableValues) {
    var currentValueIndex = availableValues.indexOf(currentValue);
    var nextValueIndex = (currentValueIndex   1) % availableValues.length;
    return availableValues[nextValueIndex];
}


function cycleElementColour (element) {
    var currentColour = element.getAttribute('data-colour');
    var newColour = cycleThroughValues(currentColour, colours);
    setElementColour(element, newColour);
}

1. Этот ответ является типичным примером чрезмерной инженерии. Мне нравится подход. Это просто не нужно. На самом деле это может запутать автора вопроса, вместо того, чтобы помочь ему.

2. Черт.. Должен признать, что вы правы. Я никогда не знаю, когда остановиться