2016-11-17 112 views
0

我有一个日期数组。加载时我想用Moment JS解析这些日期,然后在myTable的B列中显示这些日期。嵌套for循环返回错误值

我到目前为止返回数组的最后一个值3次,我不知道为什么。

function loadFunction() { 

    var cellData = ["2016-08-24 12:45", "2016-08-24 16:00","2016-08-24 13:00"]; 

    var myTable = document.getElementById("myTable"); 

    var times = []; 

    for (var i =0; i <cellData.length; i++) { 

     var date = moment(cellData[i]).format('MM/DD/YYYY hh:mm a'); 
     times.push(date); 

    for (var j=1; j < 6 ; j+=2) { 

     myTable.rows[j].cells[1].innerHTML = times[i]; 

     } 
    } 
} 


<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 

<body onload="loadFunction()"> 

<table id="myTable"> 
    <thead> 
     <tr> 
      <th colspan="3">Table</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>A</td> 
      <td>B</td> 
      <td>C</td> 
     </tr> 
     <tr style="display:none;"> 
      <td colspan="3"></td> 
     </tr> 
     <tr> 
      <td>A</td> 
      <td>B</td> 
      <td>C</td> 
     </tr> 
     <tr style="display:none;"> 
      <td colspan="3"></td> 
     </tr> 
     <tr> 
      <td>A</td> 
      <td>B</td> 
      <td>C</td> 
     </tr> 
     <tr style="display:none;"> 
      <td colspan="3"></td> 
     </tr> 
</tbody> 
</body> 

回答

0

您的第二个for对每个值重复3次。所以在单元格的最后一个值中,它将设置到单元格1 3和5中相同的值。尝试申报并迭代后外变量改变Ĵ

function loadFunction() { 
 

 
    var cellData = ["2016-08-24 12:45", "2016-08-24 16:00","2016-08-24 13:00"]; 
 

 
    var myTable = document.getElementById("myTable"); 
 

 
    var times = []; 
 
    var j=1; 
 
    
 
    for (var i =0; i <cellData.length; i++) { 
 

 
     var date = moment(cellData[i]).format('MM/DD/YYYY hh:mm a'); 
 
     times.push(date); 
 

 
     myTable.rows[j].cells[1].innerHTML = times[i]; 
 
     j += 2; 
 
      
 
    } 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
 

 
<body onload="loadFunction()"> 
 

 
<table id="myTable"> 
 
    <thead> 
 
     <tr> 
 
      <th colspan="3">Table</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>A</td> 
 
      <td>B</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr style="display:none;"> 
 
      <td colspan="3"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>A</td> 
 
      <td>B</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr style="display:none;"> 
 
      <td colspan="3"></td> 
 
     </tr> 
 
     <tr> 
 
      <td>A</td> 
 
      <td>B</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr style="display:none;"> 
 
      <td colspan="3"></td> 
 
     </tr> 
 
</tbody> 
 
</body>

+0

完美的价值,谢谢。 –