使用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/

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></table>').addClass('foo'); 
for(i=0; i<3; i++){ 
    var row = $('<tr></tr>').addClass('bar').text('result ' + i); 
    table.append(row); 
} 

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

希望这会有所帮助。

Answer 2

您需要追加table所以我更新了你的选择你的循环内内tr和去除收盘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); 

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

Answer 4

这里是你可以做什么：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>'); 
} 

最好的问候！

Answer 5

继对多文件上传用做jQuery的：

文件输入按钮：

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

在一个表中显示文件名和文件大小：

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

用于获取文件名和fil的Javascript 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");    
    }   
} 

Answer 6

或者这样做使用ALL jQuery。每个都可以循环任何数据，无论是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/

Answer 7

要添加多个列和行，我们也可以做字符串连接。不是最好的方式，但它确实有效。

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

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

Answer 8

或静态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> 

Answer 9

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

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

在你的HTML： <表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); 
}); 

Answer 10

对我来说，这种做法是漂亮：

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

Answer 11

我更喜欢使用jQuery最易读和可扩展的方式。
此外，您可以即时构建完全动态的内容。
由于jquery版本1.4，你可以传递属性到imho，一个杀手功能。 此外，代码可以保持更清洁。

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

    }); 

附加组件：传递多个“HTML”标签，你已经使用数组表示法，如： 例如

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

best Rgds。
弗朗茨

Answer 12

我写了相当不错的功能，可以产生垂直和水平表：

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

示例结果：