Question

我正在尝试让JavaScript为我生成一个包含数组数据的表，但是当我运行此代码时，它会输入两次相同的数据。有谁知道我犯的是什么错误？

HTML：

<body>
<div class="container">
    <h1 class="page-header">Bookings</h1>
    <table id="bookTable" class="table table-bordered">
        <thead>
            <tr>
            <th>First Name</th>
            <th>Second Name</th>
            <th>Email</th>
            <th>From</th>
            <th>To</th>
        </tr>
        <tr>
            <td type="text" id="firstName"></td>
            <td type="text" id="secondName"></td>
            <td type="text" id="email"></td>
            <td type="text"id="dateFrom"></td>
            <td type="text"id="dateTo"></td>
        </tr>
    </thead>
  </table>
</div>

JavaScript正在使用我发现我已经改编的指南。实际上，数组来自python文件，当Flask显示模板时，该文件作为变量输入。在查看传递的变量的内容时，我使用了python打印出来的相同数据。

<script>
    var listOfBookings = [John`Doe`jd@gmail.com`03/01/2018`18/01/2018`John`Doe`jd@gmail.com`26/12/2017`27/12/2017]
    var array = listOfBookings.split("`");
    var count = 1
    for (var i = 0; i < array.length; i++){
        if (1%(i+1) == 0){
            var firstName = array[i];
            }
        if (2%(i+1) == 0){
            var secondName = array[i];
            }
        if (3%(i+1) == 0){
            var email = array[i];
            }
        if (4%(i+1) == 0){
            var dateFrom = array[i];
            }
        if (5%(i+1) == 0){
            var dateTo = array[i];
            }



        // Addapted from http://talkerscode.com/webtricks/add-edit-and-
delete-rows-from-table-dynamically-using-javascript.php
        if(count%5 == 0){
            var table=document.getElementById("bookTable");
            var table_len=(table.rows.length)-1;
            var row = table.insertRow(table_len).outerHTML="<tr 
id='row"+table_len+"'><td id='date_row"+table_len+"'>"+firstName+"</td><td 
id='name_row"+table_len+"'>"+secondName+"</td><td 
id='country_row"+table_len+"'>"+email+"</td><td 
id='country_row"+table_len+"'>"+dateFrom+"</td><td 
id='country_row"+table_len+"'>"+dateTo+"</td></tr>";
        }
        count += 1
    }
</script>

Answer 1

您的数组似乎有10个值，而当if大于true时，所有i个语句都不会使它们的条件等于4 }。

当firstName为{secondName时，所有变量（email，dataFrom，dateTo，count，10）都具有相同的值{1}}正如5

那样

你可以这样做：

    
var array = ["John","Doe","jd@gmail.com","03/01/2018","18/01/2018","John","Doe","jd@gmail.com","26/12/2017","27/12/2017"];
var table=document.getElementById("bookTable");
            
for (var i = 0; array.length % 5 === 0 && i < array.length;){
     var firstName = array[i++];
     var secondName = array[i++];
     var email = array[i++];
     var dateFrom = array[i++];
     var dateTo = array[i++];
     var table_len = (table.rows.length)-1;
     var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='date_row"+table_len+"'>"+firstName+"</td><td id='name_row"+table_len+"'>"+secondName+"</td><td id='country_row"+table_len+"'>"+email+"</td><td id='country_row"+table_len+"'>"+dateFrom+"</td><td id='country_row"+table_len+"'>"+dateTo+"</td></tr>";
    }

<body>
<div class="container">
    <h1 class="page-header">Bookings</h1>
    <table id="bookTable" class="table table-bordered">
        <thead>
            <tr>
            <th>First Name</th>
            <th>Second Name</th>
            <th>Email</th>
            <th>From</th>
            <th>To</th>
        </tr>
        <tr>
            <td type="text" id="firstName"></td>
            <td type="text" id="secondName"></td>
            <td type="text" id="email"></td>
            <td type="text"id="dateFrom"></td>
            <td type="text"id="dateTo"></td>
        </tr>
    </thead>
  </table>
</div>

Answer 2

您的代码似乎过于复杂。以下是您可能会如何执行此操作的示例:(注意：我已向您的表中添加了tbody，而不是将所有这些行插入thead）

var listOfBookings = "John`Doe`jd@gmail.com`03/01/2018`18/01/2018`John`Doe`jd@gmail.com`26/12/2017`27/12/2017";
var array = listOfBookings.split("`");
var count = 1;
var table = document.getElementById("bookTable").getElementsByTagName('tbody')[0];
var row = table.insertRow(-1); //appends initial row  
row.id = "row_" + (count)
for (var i = 0; i < array.length; i++) {
  if (i % 5 == 0 && i > 0) {
    row = table.insertRow(-1); //appends a row
    row.id = "row_" + (++count)
  }
  var cell = row.insertCell(-1); //appends a cell
  var text = document.createTextNode(array[i]); //create the textNode
  cell.appendChild(text); //fill the cell with the text
  //(you could also set the cell id and other attributes at this point too)
}

<div class="container">
  <h1 class="page-header">Bookings</h1>
  <table id="bookTable" class="table table-bordered">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Second Name</th>
        <th>Email</th>
        <th>From</th>
        <th>To</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

JavaScript逻辑错误

2 个答案: