用jQuery创build表格 – 追加
我在页面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/
这一行：
$('#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>dynamic添加样式和dynamic地执行操作就不那么容易了。
但是这个怎么样呢，它的效果是什么呢？
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);
希望这会有所帮助。
你需要在table内附加tr ，所以我更新了你的循环中的select器，并删除了闭合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版本，如果性能是一个问题。 使用文档片段不会导致循环的每次迭代都回stream
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);
当你使用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);
或者这样做使用所有的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)); });
要添加多个列和行，我们也可以进行string连接。 不是最好的方法，但它确实有效。
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);
这也允许您dynamic地向表中添加行和列，而不用硬编码字段名。
这是你可以做的： 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>' ); }
最好的祝福！
以下是使用jQuery进行多file upload：
文件inputbutton：
<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>
获取文件名和文件大小的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"); } }
或静态HTML没有创build一些链接（或其他）的循环。 在任何页面上放置<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>
使用上述方法并使用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); });
至于我，这个方法更漂亮了：
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);
我更喜欢使用jQuery的可读性和可扩展性。
另外，您可以即时构build完整的dynamic内容。
由于jquery版本1.4你可以传递属性的元素，
imho，杀手function。 代码也可以保持清洁。
$(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 ] });
最好的Rgds。
弗朗茨
我写了相当好的函数，可以生成垂直和水平的表格：
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 );
示例结果：
