Buat tabel dengan jQuery - tambahkan

Saya memiliki div halaman:

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

dan di jquery:

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

ini menghasilkan untuk saya:

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

Saya ingin menerima ini di tabel:

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

Aku melakukan:

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

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

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

tapi ini menghasilkan untuk saya:

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

Mengapa? bagaimana saya bisa membuatnya dengan benar?

LANGSUNG: http://jsfiddle.net/n7cyE/

Garis ini:

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

Menambah div#here_tablebukan yang baru table.

Ada beberapa pendekatan:

/* 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);

Namun, dengan pendekatan di atas, menambahkan gaya dan melakukan berbagai hal secara dinamis akan lebih sulit dilakukan <table>.

Tapi bagaimana dengan yang ini, itu melakukan apa yang Anda harapkan hampir hebat:

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);

Semoga ini bisa membantu.

Anda perlu menambahkan bagian trdalam tablejadi saya memperbarui pemilih Anda di dalam lingkaran Anda dan menghapus penutup tablekarena tidak perlu.

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

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

Masalah utamanya adalah Anda menambahkan trke divtabel_ini.

Sunting: Ini adalah versi JavaScript jika kinerja menjadi perhatian. Menggunakan fragmen dokumen tidak akan menyebabkan reflow untuk setiap iterasi loop

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);

Saat Anda menggunakan append, jQuery mengharapkannya menjadi HTML yang dibentuk dengan baik (jumlah teks biasa). appendtidak suka melakukan +=.

Anda perlu membuat tabel terlebih dahulu, lalu menambahkannya.

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

Atau lakukan dengan cara ini untuk menggunakan SEMUA jQuery. Masing-masing dapat melakukan perulangan melalui data apa pun baik itu elemen DOM atau larik / objek.

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/

Untuk menambahkan beberapa kolom dan baris, kita juga bisa melakukan penggabungan string. Bukan cara terbaik, tapi pasti berhasil.

             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);

Ini juga memungkinkan Anda untuk menambahkan baris dan kolom ke tabel secara dinamis, tanpa hardcode nama field.

Inilah yang dapat Anda lakukan: 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>' );
}

Salam Hormat!

Berikut ini dilakukan untuk beberapa unggahan file menggunakan jquery:

Tombol masukan file:

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

Menampilkan nama file dan ukuran file dalam tabel:

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

Javascript untuk mendapatkan nama file dan ukuran file:

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");               
    }           
}

Atau HTML statis tanpa loop untuk membuat beberapa tautan (atau apa pun). Tempatkan <div id="menu">di halaman mana saja untuk mereproduksi HTML.

    <!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>

Saya menulis fungsi yang cukup bagus yang dapat menghasilkan tabel vertikal dan horizontal:

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;
}

contoh penggunaan:

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 );

hasil contoh:

Contoh kerja menggunakan metode yang disebutkan di atas dan menggunakan JSON untuk mewakili data. Ini digunakan dalam proyek saya menangani panggilan ajax yang mengambil data dari server.

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

Di html Anda: <table id = 'here_table'> </ table>

Kode JS:

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

Bagi saya, pendekatan ini lebih cantik:

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);

Saya lebih suka cara yang paling mudah dibaca dan dikembangkan menggunakan jquery.
Selain itu, Anda dapat membuat konten yang sepenuhnya dinamis dengan cepat.
Sejak jquery versi 1.4 Anda dapat mengirimkan atribut ke elemen yang,
imho, fitur yang mematikan. Juga kode dapat dijaga tetap bersih.

$(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: meneruskan lebih dari satu tag "html" Anda akan menggunakan notasi array seperti: mis

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

Rgds terbaik.
Franz

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

dan 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)
}

ini lebih baik

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>' );

Penting untuk dicatat bahwa Anda dapat menggunakan Emmet untuk mendapatkan hasil yang sama. Pertama, periksa apa yang dapat dilakukan Emmet untuk Anda di https://emmet.io/

Singkatnya, dengan Emmet, Anda dapat memperluas string menjadi markup HTML kompleks seperti yang ditunjukkan pada contoh di bawah ini:

Contoh 1

ul>li*5

... akan menghasilkan

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

Contoh # 2

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

... akan menghasilkan

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

Dan daftarnya terus berlanjut. Ada lebih banyak contoh di https://docs.emmet.io/abbreviations/syntax/

Dan ada perpustakaan untuk melakukan itu menggunakan jQuery. Ini disebut Emmet.js dan tersedia di https://github.com/christiansandor/Emmet.js