将数组值分配给表格单元格
[英]Assigning Array Values to Table Cells
问题描述
我正在尝试使用Javascript创建一个简单的记忆游戏，并且已经创建了一个字母数组来匹配该游戏，但是，我在弄清楚如何为该表的每个单元格实际分配一个字母时遇到了麻烦作为董事会。
<html>
<head>
<style>
td {
background-color: red;
width:100px;
height:100px;
border:1px solid black
}
</style>
<table>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
<tr>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
<td id = "tile" onClick = "revealLetter()"></td>
</tr>
</table>
<script>
var letters = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H'];
var square_values = [];
var square_ids = [];
var i = letters.length, j, temp;
while(--i > 0) {
j = Math.floor(Math.random() * (i+1));
temp = letters[j];
letters[j] = letters[i];
letters[i] = temp;
}
</script>
</head>
<body>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2017-07-27 23:35:52
我建议一种稍微不同的方法。 我编写了一个函数，该函数基于随机数组构建网格，而不是先构建表格然后放字母。 我从这个问题中借用了一个函数来随机化数组。 然后，我添加了事件侦听器，以通过将其值更改为data-letter属性来“翻转”卡。
我还没有编写其余的游戏逻辑-我不想踩你的脚！ 显然，您希望这样做，以便如果您翻了两张不匹配的书，他们会回去再试一次，但是如果他们翻了，他们会一直显示-我确定您可以按照逻辑操作修改我的功能，添加事件监听器。
buildGrid(); //global var a, b = ''; function buildGrid() { var letters = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H']; var randomised = shuffle(letters); var num_letters = randomised.length; var str_tbl = ''; while (num_letters >= 4) { str_tbl += '<tr>'; for (var i = 0; i < 4; i++) { str_tbl += '<td data-letter="' + randomised[i] + '">?</td>'; } str_tbl += '</tr>'; ranomdised = randomised.splice(0, 4); num_letters -= 4; } var tbl = document.createElement('table'); tbl.innerHTML = str_tbl; document.getElementsByClassName('grid')[0].appendChild(tbl); addEventListeners(); } function addEventListeners(){ var tds = document.getElementsByTagName( 'td' ); for( var i = 0; i < tds.length; i++ ){ tds[i].addEventListener( 'click', function(){ this.innerHTML = this.getAttribute( 'data-letter'); this.className += ' chosen'; }); } } // borrowed from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; }
td { background-color: #cccccc; text-align: centre; padding: 20px; height: 100px; width: 100px; color: #333333; font-family: helvetica, arial, sans-serif; font-size: 30px; font-weight: bold; cursor: pointer; } td:hover { background-color: #dddddd; } td.chosen { background-color: lightblue; }
<div class="grid"></div>
解决方案2
0 2017-07-27 23:38:54
您需要将参数从单击表传递到单击处理程序代码，以指示已单击了哪个表元素及其在字母数组中的位置。
有许多方法可以做到这一点，包括使用Event对象，但这是一个简单的想法。
- 删除所有id属性。 无论如何，它们不应重复。
更改每个“ onclick =“代码段，以发送已单击的元素以及要使用的下标。 因此，“ onclick”规范看起来像
onclick="revealLetter( this, 0)" // through to onclick="revealLetter( this, 15)"
然后编写代码revealLetter ，将它们用作参数：
function revealLetter( tdElement, subscript) {
// where tdElement is the table data element clicked, and
// subscript is a subscript to look its letter up in an array
// ... insert code here
如前所述，有很多方法可以做到这一点，但是您可以在获得更多经验的同时使用这种相当简单的方法。
如果您没有听说过，请不要忘记在MDN或W3Schools上查找“ innerHTML”和“ textContent”。 （它们是HTML元素的属性）
为表格单元格分配ID？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.