Generieren Sie eine einfache Tabelle mit Javascript

Question

Ich verstehe nicht warum, aber ich bekomme die falsche Körperstruktur. Sie können auf dem Bild sehen, dass ich eine <tr></tr> bekomme und ich habe das nicht auf Javascript.

Ich möchte nur eine Tabelle mit 3 Spalten und bis zu 10 Zeilen.

Was passiert?

My generated html

JavaScript

$('#selectMRPC').change(function() { 
    //fetch data 
    var mrpc = $(this).find('option:selected').data('mrpc'); 

    $('#paramBody').empty(); 
    for (var i = 1; i <= 10; i++) { 
     var field = mrpc["field" + i]; 
     if (field !== undefined) { 
      var parsedField = field.split('_'); 
      var value = parsedField[0]; 
      var type = parsedField[1]; 

      switch (type) { 
       case "S": 
        type = "text"; 
        if (value === '""') 
         value = null; 
        break; 
       case "B": 
        type = "checkbox"; 
        break; 
       case "N": 
        type = "number"; 
        value = parseInt(value); 
        break; 
       case "D": 
        type = "number"; 
        value = parseInt(value); 
        if (value === '""') 
         value = null; 
        break; 
      } 
      $('#paramBody').append('<tr>'); 
      $('#paramBody').append('<td>' + i + '</td>'); 
      $('#paramBody').append('<td>' + type + '</td>'); 
      $('#paramBody').append('<td><input name="Fields" type="' + type + '">').val(value); 
      $('#paramBody').append('</tr>'); 

     } 
    } 
}); 

Answer 1

Speicher, alles ändern: direkt

var html = ""; 

html += '<tr>'; 
html += '<td>' + i + '</td>'; 
html += '<td>' + type + '</td>'; 
html += '<td><input name="Fields" type="' + type + '" value="' + value +'">'; 
html += '</tr>'; 

$('#paramBody').append(html); 

Answer 2

append wird ein Element aus dem Parameter erstellen, wenn die gegebene Eingabe nicht bereits ein gültigen HTML-String ist

Machen Sie es

$('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><input name="Fields" type="' + type + '" value="' +value + '"></tr>'); 

Oder sie eins nach dem anderen (Beispiel unten)

$("<tr></tr>").append('<td>' + i + '</td>').appendTo('#paramBody'); 

Oder erstellen Sie eine Zeichenfolge erste

var html = '<tr>'; 
    html += '<td>' + i + '</td>'; 
    html += '<td>' + type + '</td>'; 
    html += '<td><input name="Fields" type="' + type + '" value="' + value + '">'; 
    html += '</tr>'; 


$('#paramBody').append(html); 

Answer 3

Sie sind Anfügen alles #paramBody, hängen die nicht korrekt ist. Anschließend müssen Sie Daten an <tr> anfügen/einfügen. Also würde ich empfehlen, alles zusammen zu verketten statt anzuhängen.

Sie müssen dann in den Dom in einer var

$('#paramBody').append('<tr>'); 
      $('#paramBody').append('<td>' + i + '</td>'); 
      $('#paramBody').append('<td>' + type + '</td>'); 
      $('#paramBody').append('<td><input name="Fields" type="' + type + '">').val(value); 
      $('#paramBody').append('</tr>'); 

zu

var rowHtml = '<tr>' + '<td>' + i + '</td>' + '<td>' + type + '</td>' + '<td><input name="Fields" type="' + type + '">' + value + '</tr>'; 
$('#paramBody').append(rowHtml);