有沒有更有效的方法來寫這個？

剛剛在我的教練想出的一個學校項目上工作，應該是用僞代碼編寫的，但我正在更進一步，並將其寫入javascript/html以構建一個功能性網站。基本上，有一個假設的學校有9個等級，每個等級3個教室，每個班級9個月。我應該寫一個僞代碼腳本來爲每個教室生成帳單 - 幼兒園每月80美元，其餘的每個月60美元，直到8年級。有沒有更有效的方法來寫這個？

無論如何，我很好奇，如果有更好的方法來編寫這段代碼並列出每個月的賬單 - 教師佈置代碼的方式，我必須寫這27次（每次教室3次9年級），幼兒園每月80美元，其餘課程每月60美元。這是我到目前爲止有：

<body> 
    <script> 
     var x = 0; 
     var y = 1; 
     var i; 
     var theMonths = ["January", "February", "March", "April", "May", 
      "June", "July", "August", "September"]; 

     function javascript() { 
      for (i = 0; i < 10; i++) { 
       document.getElementById("td1").innerHTML += theMonths[0]; 
       document.getElementById("td2").innerHTML += theMonths[1]; 
       document.getElementById("td3").innerHTML += theMonths[3]; 
       document.getElementById("td4").innerHTML += theMonths[4]; 
       document.getElementById("td5").innerHTML += theMonths[5]; 
       document.getElementById("td6").innerHTML += theMonths[6]; 
       document.getElementById("td7").innerHTML += theMonths[7]; 
       document.getElementById("td8").innerHTML += theMonths[8]; 
       document.getElementById("td1a").innerHTML += "$60"; 
       document.getElementById("td2a").innerHTML += "$60"; 
       document.getElementById("td3a").innerHTML += "$60"; 
       document.getElementById("td4a").innerHTML += "$60"; 
       document.getElementById("td5a").innerHTML += "$60"; 
       document.getElementById("td6a").innerHTML += "$60"; 
       document.getElementById("td7a").innerHTML += "$60"; 
       document.getElementById("td8a").innerHTML += "$60"; 
       return false; 
      } 
     } 
    </script> 
    <div id="demoDiv"> 
     <p id="demo">Your coupons:</p> 
     <table> 
      <tr> 
       <th scope="col">Month:</th> 
       <th scope="col">Price:</th> 
      </tr> 
      <tr> 
       <td id="td1"></td> 
       <td id="td1a"></td> 
      </tr> 
      <tr> 
       <td id="td2"></td> 
       <td id="td2a"></td> 
      </tr> 
      <tr> 
       <td id="td3"></td> 
       <td id="td3a"></td> 
      </tr> 
      <tr> 
       <td id="td4"></td> 
       <td id="td4a"></td> 
      </tr> 
      <tr> 
       <td id="td5"></td> 
       <td id="td5a"></td> 
      </tr> 
      <tr> 
       <td id="td6"></td> 
       <td id="td6a"></td> 
      </tr> 
      <tr> 
       <td id="td7"></td> 
       <td id="td7a"></td> 
      </tr> 
      <tr> 
       <td id="td8"></td> 
       <td id="td8a"></td> 
      </tr> 
     </table> 
    </div> 
    <input type="button" value="Go!" onclick="javascript();" /> 
</body>

有沒有辦法簡化這個，所以我不必複製/粘貼一切的27倍，並用不同的ID的27代個體表爲TD項目？

如果你能解決這個問題對我來說 - 你真棒：d

來源

2015-10-19 Mark

您可以在JavaScript中生成允許使用內部循環的表格。 – FakeRainBrigand

響應將取決於目標瀏覽器。我個人會使用'Date.prototype.toLocaleString'來解決這個問題。 – Knu

創建僞代碼的想法是識別需求並識別重複功能。如果你做了psuedocode，你會意識到解決方案是一些變量和幾個循環。 – jeff

您可以使用for如下填充表中的數據

變量x和y在不使用總之，去除他們
刪除從forreturn false;這是導致循環運行一次，然後從函數返回控制
使用的廁所p變量i得到的元件的動態順序ID和從陣列
移除從innerHTML+=從添加按鈕重複的數據，以防止相應的元件點擊
使用的硬編碼值8遍歷所有元素應該是動態的並且等於數組的長度。

Demo

var theMonths = ["January", "February", "March", "April", "May", 
    "June", "July", "August", "September"]; 

function javascript() { 
    for (var i = 0; i < 8; i++) { 
     document.getElementById("td" + (i + 1)).innerHTML = theMonths[i]; 

     document.getElementById("td" + (i + 1) + "a").innerHTML = "$60"; 
    } 
}

來源

2015-10-19 03:42:20 Tushar

抱歉，變量x和y來自我在做這件事時的先前嘗試，我忘記刪除它們。感謝捕捉:) 而且，返回false是從以前的嘗試列表中添加表之前添加的月份添加返回false。我想這裏有一堆我忘記清理的代碼。無論如何，這看起來很棒，我會盡快試用。我仍在學習JavaScript，有點新奇，所以我非常感謝幫助：D再次感謝。 – Mark

知道我可以稍後重用[i]變量真的很好，我不知道那個（document.getElementById（「td」+（i + 1））。我做了大約30分鐘的搜索，隨時隨地都可以找到 - 也許我並沒有問正確的問題，現在我明白了，這樣做更有意義。再次感謝，絕對是最好的回答:) – Mark

@Mark歡迎:)很高興爲您提供幫助。 – Tushar

我真的不你應該怎麼做，所以我就滿足你實際上是在做什麼。在沒有其他輸入的情況下，我沒有看到按鈕的位置，所以我剛剛將腳本移動到要修改的DOM元素下面，並且正在生成重複的列。

<body> 
    <div> 
     <p> Your coupons: </p> 
     <table> 
      <tbody id=demoTable> 
      <tr> 
       <th scope="col"> Month: </th> 
       <th scope="col"> Price: </th> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
    <script> 
     (function() { 
     function td(text) { 
      var column = document.createElement('td') 
      column.textContent = text 
      return column 
     } 

     var table = document.getElementById('demoTable'), 
      months = 
       [ "January", "February", "March", "April", "May", 
       "June", "July", "August", "September" ] 
     months.forEach(function(month) { 
      var row = document.createElement('tr') 
      row.appendChild(td(month)) 
      row.appendChild(td('$60')) 
      table.appendChild(row) 
     }) 
     })() 
    </script> 
</body>

來源

2015-10-19 04:01:45

有沒有更有效的方法來寫這個？

回答

相關問題