为什么在表中多次显示单个数据？ jQuery循环起诉

Question

我的数据库仅一次包含每个数据。我正在使用jQuery将数据显示到重复的html表中。检查我的代码，我认为我有一个循环问题。

数据库屏幕截图https://imgur.com/a/78bzePt

$(document).ready(function(){
    $.ajax({
        url : 'check.php',
        success: function (data) {

        data = $.parseJSON(data);
            var html = "";

        for(var a = 0; a < data.length; a++) {
          console.log(a);
            var firstName = data[a].first_name;
            var email = data[a].email;
            var dob = data[a].dob;
            var country = data[a].country;          
            var gender = data[a].gender;
            var meal= data[a].meal;
            var img = data[a].profile_pic;
            var doc = data[a].resume;

            var array = img.split(',');
             b = 1;
            html += "<tr id=" +a+ ">";
                html += "<td>" + firstName + "</td>";
                html += "<td>" + email + "</td>";
                html += "<td>" + dob + "</td>";
                html += "<td>" + country + "</td>";
                html += "<td>" + gender + "</td>";
                html += "<td>" + meal + "</td>";
              html += "<td>";
                 for (var i = 0; i < array.length; i++) {
                        var src = "uploads/"+ array[i];
                        var img1 = '<img src='+ src +' height="42" width="42">';
                         html += img1
                   }
            html += "</td>";
            html += "<td>" + doc + "</td>";
            html += "<td>" + '<input type="submit" class="button" name="edit" value="Edit" />' + "</td>";
            html += "<td>" + '<input type="submit" class="button" name="delete" value="Delete" />' + "</td>";
            html += "</tr>";
            b++;
           document.getElementById("data").innerHTML += html;
          }
        }

Answer 1

您正在更新innerHTML循环中的for，因此，可以将document.getElementById("data").innerHTML += html;移到循环外，也可以重新初始化html变量，即html = ""。 / p>

Answer 2

问题应该是html字符串var，将其放在for（var a = 0; a

$.ajax({
        url : 'check.php',
        success: function (data) {
        data = $.parseJSON(data);


        for(var a = 0; a < data.length; a++) {
            var html = "";
            console.log(a);
            var firstName = data[a].first_name;
            var email = data[a].email;
            var dob = data[a].dob;
            var country = data[a].country;          
            var gender = data[a].gender;
            var meal= data[a].meal;
            var img = data[a].profile_pic;
            var doc = data[a].resume;

            var array = img.split(',');
             b = 1;
            html += "<tr id=" +a+ ">";
                html += "<td>" + firstName + "</td>";
                html += "<td>" + email + "</td>";
                html += "<td>" + dob + "</td>";
                html += "<td>" + country + "</td>";
                html += "<td>" + gender + "</td>";
                html += "<td>" + meal + "</td>";
              html += "<td>";
                 for (var i = 0; i < array.length; i++) {
                        var src = "uploads/"+ array[i];
                        var img1 = '<img src='+ src +' height="42" width="42">';
                         html += img1
                   }
            html += "</td>";
            html += "<td>" + doc + "</td>";
            html += "<td>" + '<input type="submit" class="button" name="edit" value="Edit" />' + "</td>";
            html += "<td>" + '<input type="submit" class="button" name="delete" value="Delete" />' + "</td>";
            html += "</tr>";
            b++;
           document.getElementById("data").innerHTML += html;
          }
        }`enter code here`