从 for 循环更新 html 标签不起作用

Answer 1

考虑以下。

$.ajax({
  url: $("#GetAttendance").val(),
  type: "POST",
  dataType: "JSON",
  data: {
    StudentID: $("#StudentID").val()
  },
  success: function(result) {
    $.each(result, function(i, o) {
        $("#LoadingRecord").append((i + 1) + " of " + result.length + "<br />");
        var row = $('#tableAttendance tbody>tr:last').clone(true);
        $('label[name="Date"]', row).val(o.Date);
        $('label[name="Presence"]', row).val(o.AbsentOrPresent);
        $('#tableAttendance tbody').append(row);
      }
    });
});

您可以看到这将在标签中添加一个新行。您将得到如下结果：

<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" style="width:auto;">
    <div class="modal-content">
      <div class="modal-body" style="margin-top: -25px;">
        <label id="LoadingRecord">1 of 5<br />2 of 5<br />3 of 5<br />4 of 5<br />5 of 5<br /></label>
      </div>
    </div>
  </div>
</div>

此外，<label> 元素没有value 属性。所以我们不能在那个元素或对象上使用.val()。我们可以使用.append()。

更新

如果你想要一个进度条，这是一个非常不同的配置。这是一个基本的例子。

$(function() {
  var result = new Array(1000);
  var i = 0;

  function updateProgress(p) {
    console.log("Set progress to " + p + "%");
    $("#LoadingRecord .progress").css({
      "width": p + "%"
    });
  }

  // Once Array is loaded, can use setInterval to iterate it with timing
  // This example is using 100 MS
  var interval = setInterval(function() {
    // Increment counter
    ++i;
    updateProgress(Math.floor((i / result.length) * 100));
    // Check when to stop
    if (i >= result.length) {
      clearInterval(interval);
    }
  }, 100);
})

#LoadingRecord {
  border: 1px solid #ccc;
  width: 100%;
  height: 30px;
}

.progress {
  background-color: #ccf;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div id="LoadingRecord">
            <div class="progress" style="width: 0;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果你选择使用它，你可以简单地应用它，当你在循环中移动时，你会做同样的事情。 setInterval 仅在示例中用作循环，不会在您的代码中使用。

您将需要更新您的 HTML 以匹配上面的内容，然后像这样使用代码。

function updateProgress(p) {
  $("#LoadingRecord .progress").css({
    "width": p + "%"
  });
}

$.ajax({
  url: $("#GetAttendance").val(),
  type: "POST",
  dataType: "JSON",
  data: {
    StudentID: $("#StudentID").val()
  },
  success: function(result) {
    $.each(result, function(i, o) {
        updateProgress(Math.floor(((i + 1) / result.length) * 100));
        var row = $('#tableAttendance tbody>tr:last').clone(true);
        $('label[name="Date"]', row).val(o.Date);
        $('label[name="Presence"]', row).val(o.AbsentOrPresent);
        $('#tableAttendance tbody').append(row);
      }
    });
});