Question

我需要在AJAX成功时显示table并且我正在使用append()方法。然而，最终结果看起来很奇怪，因为表的第一行是正常大小（div元素的完整权重），而其他行只是很小的列。我认为输出有问题：

success: function(data) {
    var $el = $("#div-right");
    $el.empty();
    i = 0;
    $el.append('<table><tr><td>ID</td><td>Description</td> <td>Status</td><td></td></tr>');

    $.each(data, function() {
        if (data[i].status == '0') {  
            statusflag = '<td id="green"> Active </td>';
        } else {
            statusflag = '<td id="red-b"> Inactive </td>';
        }

        if (data[i].status == '0')  {
            action = '<a href="?category-action=' + data[i].id + '&deletetoken=' + data[i].token + '" class="deactivate">'+ '\ <img src="../images/delete.png" width="20" height="20" class="delete">'+ '</a>';
        } else {
            action = '<a href="?category-action=' + data[i].id + '&deletetoken=' + data[i].token + '" class="activate">'+ '\ <img src="../images/active2.png" width="20" height="20" class="delete">' + '</a>';
        }

        $el.append('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].id + '</td>\n\<td>' + data[i].description + '</td>' + statusflag + '<td>' + action + '</td></tr>');
        i = ++ i; 
    });

    $el.append('</table>');
    $("#div-right").show();  
},

Answer 1

如上面的注释所述，单独附加一个开始和结束标记将为您提供两个独立的<table>个节点，您可以单独创建table节点var table = $('</table>');并将所有行附加到其中，然后最后将其附加到$el：

var $el = $("#div-right");
$el.empty();
i = 0;

var table = $('</table>'); //Create table node

//Append nodes to the created table
table.append('<tr><td>ID</td><td>Description</td> <td>Status</td><td></td></tr>'); 

$.each(data, function() {
  if (data[i].status == '0'){  
    statusflag = '<td id="green"> Active </td>';} else {statusflag = '<td id="red-b"> Inactive </td>';
  }

  if (data[i].status == '0'){
    action = '<a href="?category-action=' + data[i].id + '&deletetoken=' + data[i].token + '" class="deactivate">'+ '\<img src="../images/delete.png" width="20" height="20" class="delete">'+ '</a>';
  }else{
    action = '<a href="?category-action=' + data[i].id + '&deletetoken=' + data[i].token + '" class="activate">'+ '\<img src="../images/active2.png" width="20" height="20" class="delete">'+ '</a>';
  }

  //Append nodes to the created table
  table.append('<tr data-id='+ data[i].id +' data-token='+data[i].token +  '><td>'+data[i].id+'</td>\n\<td>'+data[i].description+'</td>'+ statusflag +'<td>'+ action +'</td></tr>');

  i = ++ i; 
});

$el.append(table); //Append table to '$el' element

$("#div-right").show();

希望这有帮助。

Answer 2

正如我在评论中写的那样，你必须在同一个append中有表格的结束标记...然后将每个tr附加到$el.find('table')。所以将代码更改为：

success: function(data) {
    var $el = $("#div-right");
    $el.empty();
    i = 0;
    $el.append('<table><tr><td>ID</td><td>Description</td> <td>Status</td><td></td></tr></table>');

    $.each(data, function() {
        if (data[i].status == '0') {  
            statusflag = '<td id="green"> Active </td>';
        } else {
            statusflag = '<td id="red-b"> Inactive </td>';
        }

        if (data[i].status == '0')  {
            action = '<a href="?category-action=' + data[i].id + '&deletetoken=' + data[i].token + '" class="deactivate">'+ '\ <img src="../images/delete.png" width="20" height="20" class="delete">'+ '</a>';
        } else {
            action = '<a href="?category-action=' + data[i].id + '&deletetoken=' + data[i].token + '" class="activate">'+ '\ <img src="../images/active2.png" width="20" height="20" class="delete">' + '</a>';
        }

        $el.find('table tr:last').after('<tr data-id=' + data[i].id + ' data-token=' + data[i].token + '><td>' + data[i].id + '</td>\n\<td>' + data[i].description + '</td>' + statusflag + '<td>' + action + '</td></tr>');
        i = ++ i; 
    });

    $("#div-right").show();  
},

此外，您必须使用.after在最后tr之后添加行。

jQuery append（）没有正确打印表

2 个答案: