Html 表检查表元素或 DOM 是否完全加载在 jquery 中

Question

success: function (listAllDevicesResponse) {    
    if (listAllDevicesResponse.totalCount != 0) {
        $.each(listAllDevicesResponse.devices.device, function (i, device) {
            //if (device.registeredAt != null) {
            var statusload = "loadingStatus_" + i + "";
            var Uidstring = device.uuid.toString();
            var htmlCnt = "<a id='" + device.uuid + "' href='#' id='imgshowfirst' style='width:10px;height:10px;margin-left:15px;'  vpplabel='" + vpplabel + "' onclick="return RemoveDevice(this,'" + vpplabel + "');"> X </a>";
            //Add row
            $("#DeviceTable").append(
                '<tr id=' + device.uuid + '>' +
                '<td>' + device.userDisplayName + '</td>' +
                '<td><div id=' + statusload + ' style="margin-left:10px;"><img src="../../Images/ajax-loader.gif"/></div></td>' +
                '<td>' + htmlCnt + '</td>' +
                '</tr>');
        });
    }
    else {
    }
    }
}
$("#DeviceTable").find('tr').each(function (k) {
    var $tds = $(this).find('td'),
    DeviceId = $(this).attr("id");
});

在加载设备表表后的 ajax 成功中，我想在 ajax 成功后获取表中每一行的 id，但我无法获取行 ID。

Answer 1

看起来有些代码被切断了，但我认为这是你发布的内容：

$.ajax({
  url: '/api/devices',
  data: {},
  success: function(listAllDevicesResponse){
    // code to create a table...
    $("#DeviceTable").append(/* TABLE CONTENTS AS STRING */);
  }
});
$("#DeviceTable").find('tr').each(function (k) {
    var $tds = $(this).find('td'),
    DeviceId = $(this).attr("id");
});

此代码的问题在于当您迭代#DeviceTable时。通过此代码，发出 AJAX 请求，然后立即检查表，而无需等待响应。

确保在迭代表之前返回响应。如果您在按下按钮时执行此操作，则只需禁用按钮，然后像这样更改它：

$.ajax({
  url: '/api/devices',
  data: {},
  success: function(listAllDevicesResponse){
    // code to create a table...
    $("#DeviceTable").append(/* TABLE CONTENTS AS STRING */);
    $('#GoButton').removeAttr('disabled'); // #GoButton should already have the disabled attribute.
  }
});

$('#GoButton').click(function(){
  $("#DeviceTable").find('tr').each(function (k) {
    var $tds = $(this).find('td'),
    DeviceId = $(this).attr("id");
    // Do stuff with the DeviceId...
  });
});

编辑：

如果您希望它立即运行，那么只需在success回调中执行此操作，但在构建表之后，如下所示：

$.ajax({
  url: '/api/devices',
  data: {},
  success: function(listAllDevicesResponse){
    // code to create a table...
    $("#DeviceTable").html(/* TABLE CONTENTS AS STRING */);
    $("#DeviceTable").find('tr').each(function (k) {
      var $tds = $(this).find('td'),
      var DeviceId = $(this).attr("id");
      // Do stuff with the DeviceId...
    });
  }
});

但是在表中搜索这些值并没有真正的意义，因为您在此之前手动构建了表。这将有效，但请确保您不会两次迭代同一列表。