作爲用戶輸入數字到HTML表格中，我可以輸出2d數組的元素嗎？

漸漸地工作自學JS與一對夫婦的書，現在我在陣列。如果這個問題不符合標準，請忽略，我將刪除。我確定可以在用戶輸入時將數組的元素同時輸出到HTML表格，但我已經用盡了想法並用盡了搜索這個網站的答案。我現在有一個3x3 HTML表格，一個2d數組（「數組數組」）。要提示用戶輸入一個正整數並將其加載到每個相應的單元格（）位置。最終，我將編寫代碼來測試行，列和對角線的總和是否相同。尋找一些我需要修改當前代碼/函數的指針。這是我到目前爲止。欣賞評論。作爲用戶輸入數字到HTML表格中，我可以輸出2d數組的元素嗎？

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

來源

2015-04-04 allendks45

您發佈的代碼似乎缺少頂部的一些位，使其成爲示例代碼的實際工作位。除此之外：我建議讓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>

這使您可以更好地控制「是什麼做的，怎麼樣，這裏的」當涉及到更新表，因爲你可以重新生成它，或者你可以將事件偵聽器添加到您生成每個<td>，這樣你就可以發送而不用重新生成HTML進行處理更新事件等

來源

2015-04-04 19:33:56

我會嘗試：

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。我建議遵循Mike的解決方案，因爲他在多種情況下更靈活。我的問題更具體。另外，你應該把ID改爲'c00'，'c01'，'c02'，然後做'c10'等來使它工作。

來源

2015-04-04 19:34:44 ahitt6345

謝謝！在之前的場景中，我動態創建了表格，並且效果更好。有時候，這些書本身並沒有那麼有用，特別是章節末尾的所謂場景。我將不得不閱讀這些評論以準確理解我在做什麼。儘管一如既往的讚賞。一點一點地學習。 – allendks45 2015-04-04 19:42:41

您應該重新標記您的單元格，以便這些單元匹配您的迭代變量（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]

來源

2015-04-04 19:40:09

如果我從章節末尾的情景來看，我相信這是作者期待的。隨着本書的進展，方法和代碼應該成爲之前提交的答案。 – allendks45 2015-04-04 23:34:25

想後，並回答我的問題，以幫助其他新手像我試圖用自己的書籍和練習在章節的結尾教。你們在某個時候提供的答案將成爲我們要走的路，但是我想保持每章中學到的東西。漸漸地，我希望推進並希望瞭解解決方案和主題。再次感謝。這裏是適合我的代碼。所有缺少的是對正整數的一些數據驗證。

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"); 

}

來源

2015-04-10 12:51:39 allendks45

作爲用戶輸入數字到HTML表格中，我可以輸出2d數組的元素嗎？

回答

相關問題