Javascript / for循环/ HTML表定位
[英]Javascript/for loop/HTML table positioning
问题描述
程序说明：-我的程序使用javascript for循环将来自名为“ arrays.js”的外部javascript数组的数据放入HTML表。 该程序应将正确的数据放置在“日期名称地址数量”表标题下。
问题：-数组中的数据超出其边界，或者我应该说缺少在表标题“ Date Name Address Amount”中设置的边界。它没有在“ Amount”标题之后创建新记录，只是将新记录添加到我希望它回绕到“ 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";
2 个解决方案
解决方案1
0 已采纳 2016-11-23 05:25:30
1）您忘记在arrays.js文件中定义firstName和lastName变量。 2）在for循环内， tr标签未关闭，更改为document.write("</tr)"); 到document.write("</tr>"); 。
工作代码：
HTML代码：
绞盘-实验10的函数totalContributions（）{var totalAmount = 0; 对于（var i = 0; i <amount.length; i ++）totalAmount = totalAmount + amount [i]; 返回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";
解决方案2
0 2016-11-23 05:32:15
世界正在转向Angular，我建议您也这样做。
以Angular方式，您可以使用angular-data-table或使用angular-material-data-table进行此操作。
- angular-data-table在1.5.8下可以正常工作，但angular2不支持
- 角材料数据表（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>
- 上面的代码也为您做分页。 真棒！
上面的代码也可以用于通过以下方式使行可选：
selectable-rows =“ true”在
您要做的是：-
使用ng-app编写一个angular模块，该模块可以包含在您的主体标签中，也可以在上述代码之上创建一个父标签。 编写控制器以将您的逻辑移入控制器。 下面是一个例子。
angular.module('testModule',[])
.controller('testController', function($scope){
$scope.donations = function (){
//Your logic for donations goes here.
};
});
在HTML表格内定位
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.