jQuery append() Tabelle nicht richtig drucken

Ich muss eine table auf AJAX Erfolg zeigen, und ich verwende die append() Methode. Aber das Endergebnis sieht komisch aus, weil die erste Zeile der Tabelle normale Größe hat (Gesamtgewicht div Element) und andere Zeilen nur winzige Spalten. Ich denke, dass etwas mit dem Ausgang falsch ist:jQuery append() Tabelle nicht richtig drucken

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(); 
},

Quelle

2016-11-22 Klapsius

Sie müssen schließendes Tag der Tabelle im selben 'append' ... haben und dann nur jedes tr an' $ el.find ('table') 'anhängen. – Legionar

@Legionar was meinst du? Das schließende Tag der Tabelle ist außerhalb der Schleife – Klapsius

Sie können nur ganze Elemente gleichzeitig an das DOM anhängen. Wenn Sie ein öffnendes und schließendes Tag separat anhängen, erhalten Sie zwei '

' Elemente, da der HTML-Renderer versucht, Ihr fehlerhaftes HTML zu korrigieren. –

Antwort

Wie ich in den Kommentar schrieb, müssen Sie schließende Tag der Tabelle in der gleichen append haben ... Und dann nur jeden tr an $el.find('table') anhängen. So Ihr Code ändern, um dies zu:

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(); 
},

Auch müssen Sie .after verwenden, um Zeilen nach dem letzten tr hinzuzufügen.

Quelle

2016-11-22 09:54:16 Legionar

Es muss sein $ el.filter ('Tabelle') 'als Tabelle ist der Wurzelknoten. –

'$ el.find ('table tr: last')' könnte sein, oder nicht? – Legionar

Ja - das würde auch funktionieren –

Wie oben Kommentar sagen, eine Öffnung anhängt und separat Tag Schließen geben Sie zwei <table> Knoten getrennt, Sie var table = $('</table>'); erstellen können separat einen table Knoten und hängen Sie alle Zeilen, um es, dann hängen sie es schließlich zu $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();

Hoffnung, das hilft.

Quelle

2016-11-22 09:54:11

Verwandte Themen