使用jQuery创建表格 - 追加数据

Question

我有一个页面上的div：

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

并且在jQuery中：

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

这个对我产生了：

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

我想将这个内容以表格形式呈现：

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

我正在做：

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

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

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

但是这会为我生成：

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

为什么？我该如何使它正确呢？

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

- Mark Fondy

Answer 1

这一行：

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

将内容附加到 div#here_table 中而不是新的 table。

有几种方法：

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

然而，使用上述方法添加样式和动态操作 <table> 时较难管理。

但是这个方法如何呢？它几乎可以达到你的期望：

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

希望这可以帮到你。

- sransara

---

第二个例子中，您需要在tr内部添加td，然后对td执行.text操作。此外，使用jQuery创建HTML元素时，只需要写开头的标签。$('<table>')可以很好地工作。 - m4tt1mus

对于 jQuery 示例，您可以使用较小的标签名称，例如 $('<table/>') 而不是 $('<table></table>)，以及 $('<tr/>') 而不是 $('<tr></tr>) 等。 - phyatt

Answer 2

你需要将tr元素添加到table内，所以我在循环中更新了你的选择器，并删除了结尾处的table标签，因为它不是必须的。

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

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

主要问题在于您将tr附加到div here_table上。

编辑：如果性能是一个问题，这里提供了JavaScript版本。使用文档片段不会导致循环的每次迭代都重新绘制。

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

- Craig

---

很好的答案！谢谢！我使用了您的JavaScript版本在App Inventor中显示动态表格 http://puravidaapps.com/table.php - Taifun

不应使用 innerHTML 传递纯文本。 - cela

你应该使用 element.textContent 来处理纯文本。 - Chazy Chaz

@ChazyChaz 公平的评论，但这是9年前发布的，当时IE 9是新的，而且在IE 9以下不支持 textContent。这也不是答案的重点。对于技术发展如此迅速的10年前的帖子进行评论可能会很棘手。 - Craig

@Craig，是的，你说得完全正确，评论的目的只是为了确保遇到这些旧答案的人知道这一点。我知道这一点很好，因为我曾经懒惰地跳过文档，而是依赖于旧答案。 - Chazy Chaz

Answer 3

当你使用append时，jQuery要求它是良好格式的HTML（纯文本不行）。append不像执行+=的操作。

你需要先创建表格，然后再追加它。

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

- gen_Eric

---

最佳的方法是显示jQuery实际上是在DOM元素上工作，而不是在原始HTML上工作。 - Tadeck

Answer 4

或者您可以使用以下方法来使用完整的jQuery。each函数可以循环遍历任何数据，无论是DOM元素还是数组/对象。

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/

- Thure Jason Fransen

---

除了 jsFiddle 之外，是否需要特定的设置才能使其正常工作？在空白的 js 文件中尝试会返回“Uncaught TypeError: Cannot read property 'each' of undefined”。 - canadiancreed

你确定已经加载了jQuery吗？ - Henridv

我会更改这行代码，不使用HTML，而是使用TEXT（因为在这个例子中，我们只向表格单元格插入文本）tCell = $('<td>').text(data[i]); - PerryCS

Answer 5

要添加多个列和行，我们也可以进行字符串连接。虽然不是最好的方法，但肯定有效。

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

这还允许您动态地向表中添加行和列，而无需硬编码字段名。

- Aparna

Answer 6

这是您可以做的： 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>' );
}

最好的祝福！

- Minko Gechev

Answer 7

或者静态HTML没有创建一些链接（或其他内容）的循环。将<div id="menu">放置在任何页面上以重现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>

- HTMLJedi

Answer 8

以下是使用jQuery进行多文件上传的步骤：

文件输入按钮： 文件输入按钮：

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

Displaying File name and File size in a table:

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

获取文件名和文件大小的Javascript代码：

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

- lk.annamalai

Answer 9

我写了一个非常好的函数，可以生成垂直和水平表格：

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

使用示例：

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

示例结果：

（注：本文为机器翻译，如有不准确之处敬请谅解。）

- MSS

Answer 10

一个使用上述方法和使用JSON表示数据的工作示例。这在我的项目中用于处理从服务器获取数据的ajax调用。

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

在你的HTML中： <table id='here_table'></table>

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

- Jacob CUI