Tạo bảng với jQuery - append

Tôi có trên div trang:

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

và trong jquery:

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

điều này tạo ra cho tôi:

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

Tôi muốn nhận được điều này trong bảng:

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

Tôi đang làm:

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

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

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

nhưng điều này tạo ra cho tôi:

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

Tại sao? làm thế nào tôi có thể thực hiện điều này một cách chính xác?

TRỰC TIẾP: http://jsfiddle.net/n7cyE/

Đường thẳng này:

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

Gắn thêm vào div#here_tablekhông phải là mới table.

Có một số cách tiếp cận:

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

Tuy nhiên, với cách tiếp cận trên, việc thêm kiểu và thực hiện động với các kiểu sẽ khó quản lý hơn <table>.

Nhưng còn cái này thì sao, nó làm được những gì bạn mong đợi gần như tuyệt vời:

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

Hy vọng điều này sẽ giúp ích.

Bạn cần thêm phần trbên trong tablevì vậy tôi đã cập nhật bộ chọn của bạn bên trong vòng lặp của bạn và loại bỏ phần đóng tablevì nó không cần thiết.

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

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

Vấn đề chính là bạn đã thêm trvào divhere_table.

Chỉnh sửa: Đây là phiên bản JavaScript nếu hiệu suất là mối quan tâm. Sử dụng phân đoạn tài liệu sẽ không gây ra chỉnh sửa cho mỗi lần lặp lại của vòng lặp

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

Khi bạn sử dụng append, jQuery hy vọng nó phải là HTML được định dạng tốt (số lượng văn bản thuần túy). appendkhông giống như làm +=.

Bạn cần tạo bảng trước, sau đó nối bảng.

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

Hoặc làm theo cách này để sử dụng TẤT CẢ jQuery. Mỗi dữ liệu có thể lặp qua bất kỳ dữ liệu nào, có thể là các phần tử DOM hoặc một mảng / đối tượng.

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/

Để thêm nhiều cột và hàng, chúng ta cũng có thể thực hiện nối chuỗi. Không phải là cách tốt nhất, nhưng nó chắc chắn hoạt động.

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

Điều này cũng cho phép bạn thêm hàng và cột vào bảng một cách tự động mà không cần mã hóa cứng tên trường.

Đây là những gì bạn có thể làm: 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>' );
}

Trân trọng!

Sau đây được thực hiện cho nhiều lần tải lên tệp bằng jquery:

Nút nhập tệp:

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

Hiển thị tên tệp và kích thước tệp trong bảng:

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

Javascript để lấy tên tệp và kích thước tệp:

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

Hoặc HTML tĩnh không có vòng lặp để tạo một số liên kết (hoặc bất cứ thứ gì). Đặt <div id="menu">trên bất kỳ trang nào để tái tạo 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>

Tôi đã viết một hàm khá tốt có thể tạo bảng dọc và ngang:

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

ví dụ sử dụng:

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

kết quả ví dụ:

Một ví dụ làm việc bằng cách sử dụng phương pháp được đề cập ở trên và sử dụng JSON để biểu diễn dữ liệu. Điều này được sử dụng trong dự án của tôi về xử lý các cuộc gọi ajax tìm nạp dữ liệu từ máy chủ.

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

Trong html của bạn: <table id = 'here_table'> </ table>

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

Đối với tôi, cách tiếp cận này là đẹp hơn:

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

tôi thích cách dễ đọc và có thể mở rộng nhất bằng cách sử dụng jquery.
Ngoài ra, bạn có thể xây dựng nội dung hoàn toàn động một cách nhanh chóng.
Kể từ phiên bản jquery 1.4, bạn có thể chuyển các thuộc tính cho các phần tử,
imho, một tính năng sát thủ. Ngoài ra, mã có thể được giữ sạch hơn.

$(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: chuyển nhiều hơn một thẻ "html" mà bạn phải sử dụng ký hiệu mảng như: ví dụ:

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

Rgds tốt nhất.
Franz

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

và 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)
}

cái này tốt hơn

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

Điều quan trọng cần lưu ý là bạn có thể sử dụng Emmet để đạt được kết quả tương tự. Trước tiên, hãy kiểm tra những gì Emmet có thể làm cho bạn tại https://emmet.io/

Tóm lại, với Emmet, bạn có thể mở rộng một chuỗi thành một đánh dấu HTML phức tạp như được hiển thị trong các ví dụ bên dưới:

Ví dụ 1

ul>li*5

... sẽ sản xuất

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

Ví dụ số 2

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

... sẽ sản xuất

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

Và danh sách tiếp tục. Có nhiều ví dụ hơn tại https://docs.emmet.io/abbreviations/syntax/

Và có một thư viện để làm điều đó bằng cách sử dụng jQuery. Nó được gọi là Emmet.js và có sẵn tại https://github.com/christiansandor/Emmet.js