2016-11-23 35 views
0

程序說明: - 我的程序使用javascript for循環將數據從名爲「arrays.js」的外部javascript數組放入HTML表格中。該程序用於在「日期名稱地址數量」表標題下放置正確的數據。Javascript/for循環/ HTML表格定位

問題: - 數組中的數據越過了界限,或者我應該說在表頭中缺少邊界設置「日期名稱地址數量」它不會在「數量」標題後創建新記錄,它只是簡單的將新記錄添加到同一行。我希望它回捲到「Date」表頭下的下一個記錄行。因此,arrya中的日期值將位於「日期」標題下,「名稱」標題下的名稱值...以下示例包含在下面: 示例:我有4個標題(日期,名稱,地址,金額)我希望在下一個數組下的下一個日期的開始被放置在「Date」表頭下。它將數組的下一個日期值放在同一行上,而不是包裝到新的記錄行。代碼如下。 日期姓名地址數

的index.html

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Winch - Lab 10</title> 
     <script src="arrays.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      function totalContributions() 
      { 
       var totalAmount = 0; 
       for (var i = 0; i < amount.length; i++) 
        totalAmount = totalAmount + amount[i]; 
       return totalAmount; 
      } 

     </script> 
    </head> 
    <body> 
    <table id="donations"> 
     <tr> 
      <th>Date</th> 
      <th>Name</th> 
      <th>Address</th> 
      <th>Amount</th> 
     </tr> 
     <script> 
      for (var x=0; x < amount.length; x++){ 
       if (x%2==0){ 
        document.write("<tr>"); 
       } else { 
        document.write("<tr class='stripe'>"); 
       } 
        document.write("<td>"+date[x]+"</td>"); 
        document.write("<td>"+firstName[x]+" "+lastName[x]+"</td>"); 
        document.write("<td>"+street[x]+"<br>"+city[x]+","+state[x]+" "+zip[x]); 
        document.write("<td class='amt'>$"+amount[x]+"</td>"); 
        document.write("</tr)"); 
      } 

     </script> 
    </table> 
    </body> 
    </html> 

**arrays.js** 

street = new Array(); 
city = new Array(); 
state= new Array(); 
zip = new Array(); 
amount = new Array(); 
date = new Array(); 


firstName[0]="Ron"; 
lastName[0]="Burgundy"; 
street[0]="88 Regal Lane"; 
city[0]="Williamsburg"; 
state[0]="KY"; 
zip[0]="40769"; 
amount[0]=625; 
date[0]="2015-07-18"; 


firstName[1]="Ricky"; 
lastName[1]="Bobby"; 
street[1]="407 Easy Street"; 
city[1]="London"; 
state[1]="KY"; 
zip[1]="40744"; 
amount[1]=75; 
date[1]="2015-07-18"; 


firstName[2]="Veronica"; 
lastName[2]="Corningstone"; 
street[2]="743 Stawlings Drive"; 
city[2]="Danville"; 
state[2]="KY"; 
zip[2]="40423"; 
amount[2]=50; 
date[2]="2015-07-16"; 


firstName[3]="Brick"; 
lastName[3]="Tamland"; 
street[3]="102 Maple Lane"; 
city[3]="Danville"; 
state[3]="KY"; 
zip[3]="40423"; 
amount[3]=150; 
date[3]="2015-07-15"; 

回答

0

1)你忘了定義arrays.js文件firstNamelastName變量。 2)內部for-loop tr標籤未關閉,將document.write("</tr)");更改爲document.write("</tr>");

工作編碼:

HTML代碼:

` 絞盤 - 實驗10個 功能totalContributions() { 變種總金額= 0;對於(var i = 0; i < amount.length; i ++) totalAmount = totalAmount + amount [i]; return totalAmount; }

</script> 
</head> 
<body> 
<table id="donations" style="width:100%;" border="1"> 
    <tr> 
     <th>Date</th> 
     <th>Name</th> 
     <th>Address</th> 
     <th>Amount</th> 
    </tr> 
    <script> 
     for (var x=0; x < amount.length; x++){ 
      if (x%2==0){ 
       document.write("<tr>"); 
      } else { 
       document.write("<tr class='stripe'>"); 
      } 
       document.write("<td>"+date[x]+"</td>"); 
       document.write("<td>"+firstName[x]+" "+lastName[x]+"</td>"); 
       document.write("<td>"+street[x]+"<br>"+city[x]+","+state[x]+" "+zip[x]); 
       document.write("<td class='amt'>$"+amount[x]+"</td>"); 
       document.write("</tr>"); 
     } 

    </script> 
</table> 
</body> 
</html> 

arrays.js

street = new Array(); 
city = new Array(); 
state= new Array(); 
zip = new Array(); 
amount = new Array(); 
date = new Array(); 
firstName = new Array(); 
lastName = new Array(); 

firstName[0]="Ron"; 
lastName[0]="Burgundy"; 
street[0]="88 Regal Lane"; 
city[0]="Williamsburg"; 
state[0]="KY"; 
zip[0]="40769"; 
amount[0]=625; 
date[0]="2015-07-18"; 

firstName[1]="Ricky"; 
lastName[1]="Bobby"; 
street[1]="407 Easy Street"; 
city[1]="London"; 
state[1]="KY"; 
zip[1]="40744"; 
amount[1]=75; 
date[1]="2015-07-18"; 

firstName[2]="Veronica"; 
lastName[2]="Corningstone"; 
street[2]="743 Stawlings Drive"; 
city[2]="Danville"; 
state[2]="KY"; 
zip[2]="40423"; 
amount[2]=50; 
date[2]="2015-07-16"; 

firstName[3]="Brick"; 
lastName[3]="Tamland"; 
street[3]="102 Maple Lane"; 
city[3]="Danville"; 
state[3]="KY"; 
zip[3]="40423"; 
amount[3]=150; 
date[3]="2015-07-15"; 
+0

changed document.write(「」); **代碼現在工作,林新的stackoverflow試圖投票的答案,但我沒有enof點要這樣做?當我收到更多積分時,我會回來。謝謝「核心」我會回來獎勵你。 –

+0

@EdwardWinch沒問題,我很高興它幫助你:)。 –

0

世界正在向角,我會建議你做同樣的。

以角度方式,您可以使用角度數據表或使用角度材料數據表執行此操作。

  • 角數據表正常工作與1.5.8但不會在 angular2
  • 角度材料數據表(MD-數據表)的工作原理可以支持與1.5.8 和將也支持angular2。

下面是MD-數據表

<mdt-table table-card="{visible: true, title: 'Donations'}" paginated-rows = "true"> 
    <mdt-header-row> 
     <mdt-column align-rule="left"><b>Name</b></mdt-column> 
     <mdt-column align-rule="left"><b>Description</b></mdt-column> 
     <mdt-column align-rule="left"><b>Since Year</b></mdt-column> 
    </mdt-header-row> 
    <mdt-row ng-repeat="item in donations"> 
     <mdt-cell>{{item.name}}</mdt-cell> 
     <mdt-cell>{{item.description}}</mdt-cell> 
     <mdt-cell>{{item.since_yr}}</mdt-cell> 
    </mdt-row> 
    </mdt-table> 
  • 的一例上面的代碼也做分頁爲您服務。真棒!
  • 上面的代碼也可以用來做選擇行通過投入:在

可選擇-行=「真」什麼ü需要做的是: -

使用ng-app編寫一個角度模塊,該模塊可以包含在你的body標籤中,或者在上面的代碼上面創建一個父標籤。 編寫一個控制器將ur邏輯移動到控制器中。 下面是一個例子。

angular.module('testModule',[]) 
     .controller('testController', function($scope){ 
      $scope.donations = function(){ 
       //Your logic for donations goes here. 
      };  
     });