Tabelle mit jQuery erstellen - anhängen

Ich habe auf Seite div:

<div id="here_table"></div>

und in jquery:

for(i=0;i<3;i++){
    $('#here_table').append( 'result' +  i );
}

das erzeugt für mich:

<div id="here_table">
    result1 result2 result3 etc
</div>

Ich möchte dies in Tabelle erhalten:

<div id="here_table">
    <table>
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
    </table>
</div>

Ich mache:

$('#here_table').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

 $('#here_table').append(  '</table>' );

aber das erzeugt für mich:

<div id="here_table">
    <table> </table> !!!!!!!!!!
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
</div>

Warum? Wie kann ich das richtig machen?

LIVE: http://jsfiddle.net/n7cyE/

Diese Linie:

$('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );

Hängt an das div#here_tablenicht das Neue table.

Es gibt verschiedene Ansätze:

/* Note that the whole content variable is just a string */
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#here_table').append(content);

Mit dem oben beschriebenen Ansatz ist es jedoch weniger einfach, Stile hinzuzufügen und Dinge dynamisch zu erledigen <table>.

Aber wie wäre es mit diesem, es macht das, was Sie erwarten, fast großartig:

var table = $('<table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

$('#here_table').append(table);

Hoffe das würde helfen.

Sie müssen das trInnere anhängen, tabledamit ich Ihren Selektor in Ihrer Schleife aktualisiert und das Schließen entfernt habe, tableda dies nicht erforderlich ist.

$('#here_table').append(  '<table />' );

 for(i=0;i<3;i++){
    $('#here_table table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

Das Hauptproblem war, dass Sie das tran die divhere_table anhängen.

Bearbeiten: Hier ist eine JavaScript-Version, wenn die Leistung ein Problem darstellt. Die Verwendung eines Dokumentfragments führt nicht bei jeder Iteration der Schleife zu einem Reflow

var doc = document;

var fragment = doc.createDocumentFragment();

for (i = 0; i < 3; i++) {
    var tr = doc.createElement("tr");

    var td = doc.createElement("td");
    td.innerHTML = "content";

    tr.appendChild(td);

    //does not trigger reflow
    fragment.appendChild(tr);
}

var table = doc.createElement("table");

table.appendChild(fragment);

doc.getElementById("here_table").appendChild(table);

Wenn Sie verwenden append, erwartet jQuery, dass es sich um wohlgeformtes HTML handelt (Anzahl der einfachen Texte). appendist nicht wie zu tun +=.

Sie müssen zuerst die Tabelle erstellen und dann anhängen.

var $table = $('<table/>');
for(var i=0; i<3; i++){
    $table.append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}
$('#here_table').append($table);

Oder machen Sie es so, um ALL jQuery zu verwenden. Jeder kann beliebige Daten durchlaufen, sei es DOM-Elemente oder ein Array / Objekt.

var data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
var numCols = 1;           


$.each(data, function(i) {
  if(!(i%numCols)) tRow = $('<tr>');

  tCell = $('<td>').html(data[i]);

  $('table').append(tRow.append(tCell));
});
​

http://jsfiddle.net/n7cyE/93/

Um mehrere Spalten und Zeilen hinzuzufügen, können Sie auch eine Zeichenfolgenverkettung durchführen. Nicht der beste Weg, aber es funktioniert auf jeden Fall.

             var resultstring='<table>';
      for(var j=0;j<arr.length;j++){
              //array arr contains the field names in this case
          resultstring+= '<th>'+ arr[j] + '</th>';
      }
      $(resultset).each(function(i, result) {
          // resultset is in json format
          resultstring+='<tr>';
          for(var j=0;j<arr.length;j++){
              resultstring+='<td>'+ result[arr[j]]+ '</td>';
          }
          resultstring+='</tr>';
      });
      resultstring+='</table>';
          $('#resultdisplay').html(resultstring);

Auf diese Weise können Sie der Tabelle auch dynamisch Zeilen und Spalten hinzufügen, ohne die Feldnamen fest zu codieren.

Folgendes können Sie tun: http://jsfiddle.net/n7cyE/4/

$('#here_table').append('<table></table>');
var table = $('#here_table').children();
 for(i=0;i<3;i++){
    table.append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

Freundliche Grüße!

Folgendes wird für mehrere Datei-Uploads mit jquery durchgeführt:

Datei-Eingabetaste:

<div>
 <input type="file" name="uploadFiles" id="uploadFiles" multiple="multiple" class="input-xlarge" onchange="getFileSizeandName(this);"/> 
</div>

Anzeigen des Dateinamens und der Dateigröße in einer Tabelle:

<div id="uploadMultipleFilediv">
<table id="uploadTable" class="table table-striped table-bordered table-condensed"></table></div>

Javascript zum Abrufen des Dateinamens und der Dateigröße:

function getFileSizeandName(input)
{
    var select = $('#uploadTable');
    //select.empty();
    var totalsizeOfUploadFiles = "";
    for(var i =0; i<input.files.length; i++)
    {
        var filesizeInBytes = input.files[i].size; // file size in bytes
        var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2); // convert the file size from bytes to mb
        var filename = input.files[i].name;
        select.append($('<tr><td>'+filename+'</td><td>'+filesizeInMB+'</td></tr>'));
        totalsizeOfUploadFiles = totalsizeOfUploadFiles+filesizeInMB;
        //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes");               
    }           
}

Oder statisches HTML ohne Schleife zum Erstellen einiger Links (oder was auch immer). Platzieren Sie das <div id="menu">auf einer beliebigen Seite, um den HTML-Code zu reproduzieren.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HTML Masterpage</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

        <script type="text/javascript">
            function nav() {
                var menuHTML= '<ul><li><a href="#">link 1</a></li></ul><ul><li><a href="#">link 2</a></li></ul>';
                $('#menu').append(menuHTML);
            }
        </script>

        <style type="text/css">
        </style>
    </head>
    <body onload="nav()">
        <div id="menu"></div>
    </body>
    </html>

Ich habe eine ziemlich gute Funktion geschrieben, die vertikale und horizontale Tabellen erzeugen kann:

function generateTable(rowsData, titles, type, _class) {
    var $table = $("<table>").addClass(_class);
    var $tbody = $("<tbody>").appendTo($table);


    if (type == 2) {//vertical table
        if (rowsData.length !== titles.length) {
            console.error('rows and data rows count doesent match');
            return false;
        }
        titles.forEach(function (title, index) {
            var $tr = $("<tr>");
            $("<th>").html(title).appendTo($tr);
            var rows = rowsData[index];
            rows.forEach(function (html) {
                $("<td>").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });

    } else if (type == 1) {//horsantal table 
        var valid = true;
        rowsData.forEach(function (row) {
            if (!row) {
                valid = false;
                return;
            }

            if (row.length !== titles.length) {
                valid = false;
                return;
            }
        });

        if (!valid) {
            console.error('rows and data rows count doesent match');
            return false;
        }

        var $tr = $("<tr>");
        titles.forEach(function (title, index) {
            $("<th>").html(title).appendTo($tr);
        });
        $tr.appendTo($tbody);

        rowsData.forEach(function (row, index) {
            var $tr = $("<tr>");
            row.forEach(function (html) {
                $("<td>").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });
    }

    return $table;
}

Anwendungsbeispiel:

var title = [
    'مساحت موجود',
    'مساحت باقیمانده',
    'مساحت در طرح'
];

var rows = [
    [number_format(data.source.area,2)],
    [number_format(data.intersection.area,2)],
    [number_format(data.deference.area,2)]
];

var $ft = generateTable(rows, title, 2,"table table-striped table-hover table-bordered");

$ft.appendTo( GroupAnalyse.$results );

var title = [
    'جهت',
    'اندازه قبلی',
    'اندازه فعلی',
    'وضعیت',
    'میزان عقب نشینی',
];

var rows = data.edgesData.map(function (r) {
    return [
        r.directionText,
        r.lineLength,
        r.newLineLength,
        r.stateText,
        r.lineLengthDifference
    ];
});


var $et = generateTable(rows, title, 1,"table table-striped table-hover table-bordered");

$et.appendTo( GroupAnalyse.$results );

$('<hr/>').appendTo( GroupAnalyse.$results );

Beispielergebnis:

Ein Arbeitsbeispiel mit der oben genannten Methode und JSON zur Darstellung der Daten. Dies wird in meinem Projekt zum Umgang mit Ajax-Aufrufen verwendet, die Daten vom Server abrufen.

http://jsfiddle.net/vinocui/22mX6/1/

In Ihrem HTML: <table id = 'here_table'> </ table>

JS-Code:

function feed_table(tableobj){
    // data is a JSON object with
    //{'id': 'table id',
    // 'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    // 'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },...   ]}

    $('#' + tableobj.id).html( '' );

    $.each([tableobj.header, tableobj.data], function(_index, _obj){
    $.each(_obj, function(index, row){
        var line = "";
        $.each(row, function(key, value){
            if(0 === _index){
                line += '<th>' + value + '</th>';    
            }else{
                line += '<td>' + value + '</td>';
            }
        });
        line = '<tr>' + line + '</tr>';
        $('#' + tableobj.id).append(line);
    });


    });    
}

// testing
$(function(){
    var t = {
    'id': 'here_table',
    'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },
         {'a': 'Real Estate',  'b' :'Property',  'c' :'$500000' , 'd': 'Edit/Delete' }
        ]};

    feed_table(t);
});

Für mich ist dieser Ansatz schöner:

String.prototype.embraceWith = function(tag) {
    return "<" + tag + ">" + this + "</" + tag + ">";
};

var results = [
  {type:"Fiat", model:500, color:"white"}, 
  {type:"Mercedes", model: "Benz", color:"black"},
  {type:"BMV", model: "X6", color:"black"}
];

var tableHeader = ("Type".embraceWith("th") + "Model".embraceWith("th") + "Color".embraceWith("th")).embraceWith("tr");
var tableBody = results.map(function(item) {
    return (item.type.embraceWith("td") + item.model.toString().embraceWith("td") + item.color.embraceWith("td")).embraceWith("tr")
}).join("");

var table = (tableHeader + tableBody).embraceWith("table");

$("#result-holder").append(table);

Ich bevorzuge die am besten lesbare und erweiterbare Methode mit jquery.
Außerdem können Sie im laufenden Betrieb volldynamische Inhalte erstellen.
Seit jquery Version 1.4 können Sie Attribute an Elemente übergeben, was
imho eine Killer-Funktion ist. Auch der Code kann sauberer gehalten werden.

$(function(){

        var tablerows = new Array();

        $.each(['result1', 'result2', 'result3'], function( index, value ) {
            tablerows.push('<tr><td>' + value + '</td></tr>');
        });

        var table =  $('<table/>', {
           html:  tablerows
       });

        var div = $('<div/>', {
            id: 'here_table',
            html: table
        });

        $('body').append(div);

    });

Addon: Wenn Sie mehr als ein "HTML" -Tag übergeben, müssen Sie die Array-Notation verwenden, z. B.: Z

var div = $('<div/>', {
            id: 'here_table',
            html: [ div1, div2, table ]
        });

beste Rgds.
Franz

<table id="game_table" border="1">

und Jquery

var i;
for (i = 0; ii < 10; i++) 
{

        var tr = $("<tr></tr>")
        var ii;
        for (ii = 0; ii < 10; ii++) 
        {
        tr.append(`<th>Firstname</th>`)
        }

$('#game_table').append(tr)
}

das ist am besten

html

<div id="here_table"> </div>

jQuery

$('#here_table').append( '<table>' );

for(i=0;i<3;i++)
{
$('#here_table').append( '<tr>' + 'result' +  i + '</tr>' );

    for(ii=0;ii<3;ii++)
    {
    $('#here_table').append( '<td>' + 'result' +  i + '</tr>' );
    }
}

$('#here_table').append(  '</table>' );

Es ist wichtig zu beachten, dass Sie Emmet verwenden können, um das gleiche Ergebnis zu erzielen. Überprüfen Sie zunächst unter https://emmet.io/ , was Emmet für Sie tun kann.

Kurz gesagt, mit Emmet können Sie eine Zeichenfolge zu einem komplexen HTML-Markup erweitern, wie in den folgenden Beispielen gezeigt:

Beispiel 1

ul>li*5

... wird herstellen

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Beispiel 2

div#header+div.page+div#footer.class1.class2.class3

... wird herstellen

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Und die Liste geht weiter. Weitere Beispiele finden Sie unter https://docs.emmet.io/abbreviations/syntax/

Und dafür gibt es eine Bibliothek mit jQuery. Es heißt Emmet.js und ist unter https://github.com/christiansandor/Emmet.js verfügbar