Question

我收到以下JSON对象：

[Object, Object, Object]
0: Object
a: "a"
b: "b"
c: "c"
__proto__: Object
1: Object
a: "a"
b: "b"
c: "c"
__proto__: Object
2: Object
a: "a"
b: "b"
c: "c"
__proto__: Object
length: 3
__proto__: Array[0]

使用以下ajax代码：

function describeItems() {

 var html;
 var loadingContainer = $("<div class='containerLoading'></div>");
 var emptyContainer = $('<div class="emptyContainer"><div style="width: 400px; margin-left:20px;"><h4>Let\'s get started!</h4>You do not have anything in your bucket.<br \>Click the shop button to start shopping items.<button style="margin-top: 20px;" class="btn btn-large btn-primary" type="button" data-toggle="modal" data-target="#shop-items">Shop Items</button></div></div>');
 $("#items-table").append(loadingContainer.fadeIn(100));

 $.ajax( { 
  type: "POST", 
  url: "function.php", 
  data: {action: 'test'}, 
  dataType: "json", 
  cache: "false",
  success: function(data) { 

  // DEBUG
  console.log(data)
  if (data != null)
  {
      // DEBUG
      //console.log(data);
      html = html + '<tr>';
      html = html + '<td><input type="checkbox" value=""></td>';

      $.each(data, function(key,value) {
       if (!$.isPlainObject(value)) {
        html = html + '<td>' + value + '</td>'; 
       };
      });

     html = html + '</tr>';

     $.each(data, function(key,value) {  
      html = html + '<tr>';
      html = html + '<td><input type="checkbox" value=""></td>';

      if ($.isPlainObject(value)) { 

       // DEBUG   
       //console.log(value);
       $.each(data[key], function(key, value) {
        html = html + '<td>' + value + '</td>';     
       }); 
      };

     html = html + '</tr>';
     });

     html = html + '</tbody>';

     // ADD THE HTML TO THE DIV.
     $('#innerContent').html(html);

     // WHEN LOADING IS DONE, REMOVE OVERLAY.
     $("#item-table .containerLoading").fadeOut(100, function() {
      $(this).remove();
     }); 
 }
 else
 {
     // WHEN LOADING IS DONE, REMOVE OVERLAY.
     $("#item-table .containerLoading").fadeOut(100, function() {
      $(this).remove();
     });

    $("#item-table").append(emptyContainer.fadeIn(100));

 }
     }, // END OF SUCCESS
     error: function (xhr, ajaxOptions, thrownError) {
      alert('Response Code: ' + xhr.status);
      alert(thrownError);
      alert(xhr.responseText);
     }

 }); // END OF $.AJAX 
};

但不知何故，我的html表中有一个空的<tr>，至少它没有对象内容..：

<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th></th>
            <th>a</th>
            <th>b</th>
            <th>c</th>
        </tr>
    </thead>
    <tbody id="innerContent">
    <tr>
        <td>
            <input type="checkbox" value="">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="">
        </td>
        <td>
            a
        </td>
        <td>
            b
        </td>
        <td>
            c
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="">
        </td>
        <td>
            a
        </td>
        <td>
            b
        </td>
        <td>
            c
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" value="">
        </td>
        <td>
            a
        </td>
        <td>
            b
        </td>
        <td>
            c
        </td>
    </tr>       
    </tbody>
</table>

我需要更改哪些内容才能删除第一个空的<tr>？

Answer 1

除了TD

之外，此循环不会产生任何checkbox

  html = html + '<tr>';
  html = html + '<td><input type="checkbox" value=""></td>';

  $.each(data, function(key,value) {
   if (!$.isPlainObject(value)) {
    html = html + '<td>' + value + '</td>'; 
   };
  });

 html = html + '</tr>';

您的数据是一个数组，数组的每个元素都是一个对象。

if (!$.isPlainObject(value))始终为false，但您仍在创建行

为什么我的Ajax代码构建为空的第一项？

1 个答案: