Javascript Array of Objects as Table data

Я работаю над чистой сеткой в стиле сетки JS 6x6, в которой каждая ячейка сетки должна чередоваться между 3 цветами (по одному за раз) при однократном нажатии. Я сталкиваюсь с двумя проблемами: я хочу показать каждую ячейку пустой, просто содержащий цвет, но я не могу заставить это работать, не отображая текст в ячейке.Javascript Array of Objects as Table data

Я также пытаюсь выяснить способ «переключения» между тремя цветами. Мое использование переключателей работает для двух цветов, но я не совсем уверен, могу ли/как добавить третий вариант, поскольку он работает на основе 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" && event.target.classList.contains("blueTile")) { 
    event.target.classList.toggle("blue"); 
    } 
}); 
document.querySelector("#gridTable").addEventListener("click", function(event) { 
    if (event.target.tagName === "TD" && event.target.classList.contains("blueTile")) { 
    event.target.classList.toggle("grey"); 
    } 
    }); 



    </script> 

    </body> 
    </html>

источник

2016-10-19 Jeremy Stone

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

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

<!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")){ 
 
\t event.target.className = 'grey'; 
 
    }else if(event.target.classList.contains("grey")){ 
 
\t event.target.className = 'white' 
 
    }else if(event.target.classList.contains("white")){ 
 
\t event.target.className = 'blue' 
 
    } 
 
}); 
 
    </script> 
 
    </body> 
 
</html>

источник

2016-10-19 22:35:43

Это ничего не меняет –

Просто проверили код и он работал на меня. Я редактирую ответ с рабочим кодом для обеих проблем, которые у вас есть. –

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

Это может выглядеть следующим образом (full working example on 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); 
}

источник

2016-10-19 23:39:14 axelduch

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

Черт .. Признаюсь, ты прав. Я никогда не знаю, когда остановиться – axelduch

Javascript Array of Objects as Table data

ответ

Смежные вопросы