Question

计划说明： - 我的程序使用javascript for循环将数据从名为“arrays.js”的外部javascript数组放入HTML表中。该程序用于将正确的数据放在“日期名称地址金额”表格标题下。

问题： - 数组中的数据超出了它的边界，或者我应该说在表标题“Date Name Address Amount”中设置的边界不足它在“Amount”标题之后没有创建新记录，它只是将新记录添加到同一个line.I希望它回绕到“Date”表头下的下一个记录行。因此，arrya中的日期值将位于“日期”标题下，“名称”标题下的名称值...等示例如下... 示例：我有4个标题（日期，名称，地址，金额）我希望下一个数据的下一个日期的开始位于“日期”表标题下。它将数组的下一个日期值放在同一行它不会缠绕到新的记录行。代码如下。日期名称地址金额

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

Answer 1

1）您忘记在arrays.js文件中定义firstName和lastName个变量。 2）在For循环内部，tr标记未关闭，document.write("</tr)");更改为document.write("</tr>");。

工作代码：

Html代码：

` 绞车 - 实验室10 function totalContributions（） { var totalAmount = 0; for（var i = 0; i＆lt; 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";

Answer 2

世界正在转向Angular，我建议你这样做。

以Angular方式，您可以使用angular-data-table或使用angular-material-data-table来执行此操作。

angular-data-table适用于1.5.8，但不支持 angular2
angular material-data-table（md-data-table）与1.5.8一起使用并且也将在angular2中得到支持。

以下是md-data-table

的示例

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

上面的代码也为你做了分页。真棒！
上面的代码也可用于通过输入：
来选择行
可选择-行=＆＃34;真＆＃34;在

你需要做的是： -

使用ng-app编写一个角度模块，可以包含在ur body标签中，或者在上面的代码之上创建一个父标签。写一个控制器来将你的逻辑移动到控制器中。以下是一个例子。

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

Javascript / for循环/ HTML表定位

2 个答案: