Question

渐渐地用自己的几本书教自己JS，现在我在Arrays。如果这个问题不符合标准，请忽略，我会删除。我确信当用户输入数组时，可以同时将数组元素输出到HTML表格，但是我已经用完了想法并且用尽了我对该网站的搜索以获得答案。我现在有一个3x3 HTML表，一个2d数组（＆＃34;数组数组＆＃34;）。想要提示用户输入正整数并将其加载到每个相应的cell（）位置。最后，我将编写代码来测试行，列和对角线的总和是否相同。寻找一些我需要修改当前代码/功能的指针。这是我到目前为止所拥有的。感谢评论。

<html>
<head>
    <script type="text/javascript">
    function simpleTable() {
    //create array of 3 rows 3 columns
    var myArray = new Array(3);
    for(var i = 0; i < 3; i++)
    {
        myArray[i] = new Array(3);
    }

    for(var i = 0; i < 3; i++) //prompt user for input and fill the array
    {
        for(var j = 0; j < 3; j++)
        {
            myArray[i][j]= prompt("Enter a number for row " + (i + 1) + 
                           ", column " + (j + 1) + ":");
            //need to output user input immediately to a cell in HTML 
              table here.
        }
    }

    }

    //add another function here to test the rows, cols diagonals if sums     
    are equal
    function areEqual() {
    //expand after solving the issue with seeing user input data
    }
    </script>
</head>
<body>
    <div id="button1">
    <button type="button" id="nums" onClick="simpleTable()">Enter 
    positive numbers</button>
    </div>

    <table width="100%" border="1">
        <tr>
            <td height="50"><span id="c01" /span></td>
            <td><span id="c02" /span></td>
            <td><span id="c03" /span></td>
        </tr>
        <tr>
            <td height="50"><span id="c1l" /span></td>
            <td><span id="c12" /span></td>
            <td><span id="c13" /span></td>
        </tr>
        <tr>
            <td height="50"><span id="c21" /span></td>
            <td><span id="c22" /span></td>
            <td><span id="c23" /span></td>
        </tr>
    </table>
</body>
</html>

Answer 1

您发布的代码似乎缺少顶部的一些位，使其成为示例代码的实际工作位。除此之外：我建议让javascript生成该表，而不是手动编码。

// turn a [[1,2,...],[3,4,...],[],...] into a
// <table><tr><td>1</td><td>2</td>...</tr><tr>...</tr>...</table>
function makeTable(arrayOfArrays) {
  var table = document.createElement("table");
  var rows = formRows(arrayOfArrays);
  rows.forEach(function(row) {
    table.appendChild(row);
  });
  return table;
}

// turn a [1,2,...] into <tr><td>1</td><td>2</td>...</tr>
function formRows(arrayOfArrays) {
  return arrayOfArrays.map(function(individualArray, rowId) {
    var row = document.createElement("tr");
    individualArray.forEach(function(cellValue, cellId) {
      var col = document.createElement("td");
      col.textContent = cellValue;
      col.id = "cell-" + rowId + "-" + cellId;
      row.appendChild(col);
    });
    return row;
  });     
}

然后将其插入占位符元素，例如：

<!doctype html>
<html>
  <body>
    <div id="tabletarget"></div>
    <script> /* all your JS including the above code */</script>
    <script>
      var target = document.getElementById("tabletarget");
      target.appendChild(makeTable(yourArrayOfArraysHere));
    </script>
  <body>
</html>

这使您可以更好地控制＆＃34;做什么，如何，在哪里＆＃34;在更新表时，因为您可以重新生成它，或者您可以为您生成的每个<td>添加事件侦听器，这样您就可以发送更新事件以便处理而无需重新生成HTML等。

Answer 2

您应该重新标记您的单元格，使索引与您的迭代变量（c00，c01 ...）匹配。然后，您可以构造其内容需要更新的单元格的id：

var cellId = "c" + i + j; // or "#c" + i + j, if you are using jquery
document.getElementById(cellId).innerHTML(myArray[i][j]); // if it's not text, you may need "" + myArray[i][j]

Answer 3

我会尝试：

myArray[i][j]= prompt("Enter a number for row " + (i + 1) + 
                       ", column " + (j + 1) + ":");
        //need to output user input immediately to a cell in HTML 
document.getElementById('c'+(i)+''+(j)).innerHTML = myArray[i][j];

另外，这可能不起作用，因为在第二列中，id拼写错误。 c1l。我建议遵循迈克的解决方案，因为他在多种情况下更灵活。我的问题更具针对性。另外，您应该将ID更改为＆＃39; c00＆＃39; c01＆＃39;＆＃39; c02＆＃39;然后执行＆＃39; c10＆＃39;使其发挥作用。

Answer 4

希望发布并回答我自己的问题，以帮助像我一样的另一个初学者在章节末尾尝试用书和练习自学。你们所有人在某些时候提供的答案将是要走的路，但我想保持每一章所学到的知识。渐渐地，我希望能够推进并希望了解解决方案和主题。再次感谢。这是适合我的代码。缺少的只是一些数据验证正整数。

function simpleSquare() {
    myArray = new Array([document.getElementById("cell00"), 
              document.getElementById("cell01"),   
              document.getElementById("cell02")], 
              [document.getElementById("cell10"), 
              document.getElementById("cell11"),  
              document.getElementById("cell12")],
              [document.getElementById("cell20"), 
              document.getElementById("cell21"),    
              document.getElementById("cell22")]);
for(var rows = 0; rows < 3; rows++)
{
    for(var cols = 0; cols < 3; cols++)
    {
        var nums = parseInt(prompt("Enter a number for row " + (rows +   
1) + ", column " + (cols + 1) + "."));
        myArray[rows][cols].innerHTML = nums;
    }
}
}

function checkMagic() {
var flag = true;

var sumDiag1 = parseInt(myArray[0][0].innerHTML) + parseInt(myArray[1] 
[1].innerHTML) + parseInt(myArray[2][2].innerHTML);

var sumDiag2 = parseInt(myArray[2][0].innerHTML) + parseInt(myArray[1]
[1].innerHTML) + parseInt(myArray[1][2].innerHTML);
if(sumDiag1 != sumDiag2)
    flag = false;       
//get sum of rows using for loop and check if they are the same
for(var i = 0; i < 3; i++)
{
    var rowSum = parseInt(myArray[i][0].innerHTML) + parseInt(myArray[i]
[1].innerHTML) + parseInt(myArray[i][2].innerHTML);
    if(rowSum != sumDiag1) //check if row is same as diagonal
        flag = false;
}
for(var j = 0; j < 3; j++)
{
    var colSum = parseInt(myArray[0][j].innerHTML) + parseInt(myArray[1]
[j].innerHTML) + parseInt(myArray[2][j].innerHTML);
    if(colSum != sumDiag2)
        flag = false;
}
//output the results to table
if(flag == false)
    document.getElementById("magic").innerHTML=("Sorry, your square is 
not a magic square");

if(flag == true)
    document.getElementById("magic").innerHTML=("Wow! This is a magic   
square");

}

我可以将二维数组的元素作为用户输入数字输出到HTML表中吗？

4 个答案: