Crea una tabella con jQuery - aggiungere

Question

ho a pagina div:

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

e in jQuery:

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

questa generazione per me:

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

vorrei ricevere questo nella tabella:

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

io che faccio:

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

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

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

ma questo genera per me:

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

Perché? come posso farlo correttamente?

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

Answer 1

Questa linea:

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

Aggiunge al non div#here_table il nuovo table.

Ci sono diversi approcci:

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

Ma, con l'approccio di cui sopra è meno gestibile per aggiungere stili e fare cose in modo dinamico con <table>.

Ma come su questo, fa quello che ci si aspetta quasi grande:

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

Spero che questo sarebbe di aiuto.

Answer 2

È necessario aggiungere il tr all'interno del table così ho aggiornato il vostro selettore all'interno del vostro ciclo e rimosso la chiusura table perché non è necessario.

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

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

Il problema principale era che si stava aggiungendo il tr al div here_table.

Modifica:Ecco una versione JavaScript se le prestazioni sono un problema. Utilizzando frammento di documento non causerà un riflusso per ogni iterazione del ciclo

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

Quando si utilizza append, jQuery si aspetta che sia ben formato HTML (conta solo testo). append non è come fare +=.

È necessario eseguire prima la tabella, quindi aggiungerla.

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

Answer 4

Ecco cosa si può fare: 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>'); 
} 

i migliori saluti!

Answer 5

seguente è fatto per caricamento di file multipli utilizzando jQuery:

pulsante di input File:

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

Visualizzazione Nome del file e la dimensione del file in una tabella:

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

Javascript per ottenere il nome e il file del file e dimensioni:

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

O farlo in questo modo di utilizzare tutte jQuery. Ciascuno può scorrere tutti i dati che si tratti di elementi DOM o di un array/oggetto.

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

Per aggiungere più colonne e righe, possiamo anche fare una concatenazione di stringhe. Non è il modo migliore, ma sicuramente funziona.

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

Ciò consente inoltre di aggiungere righe e colonne alla tabella in modo dinamico, senza codificare i nomi di campo.

Answer 8

O codice HTML statico senza il loop per la creazione di alcuni collegamenti (o altro). Posizionare <div id="menu"> in qualsiasi pagina per riprodurre l'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

Un esempio operativo che utilizza il metodo menzionato sopra e che utilizza JSON per rappresentare i dati. Questo è usato nel mio progetto di gestione delle chiamate ajax che prelevano i dati dal server.

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

nel codice HTML: < tavolo id = 'here_table'> </table>

JS Codice:

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

Per quanto mi riguarda, questo approccio è più bella:

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

preferisco il modo più leggibile ed estensibile usando jquery.
Inoltre, è possibile creare contenuti completamente dinamici al volo.
Dalla versione 1.4 di jquery è possibile passare attributi ad elementi che sono,
imho, una caratteristica killer. Anche il codice può essere mantenuto più pulito.

$(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: passa più di un tag "html" hai di usare la notazione di matrice come: esempio

migliori Rgds.
Franz

Answer 12

ho scritto piuttosto buona funzione in grado di generare le tabelle verticali e orizzontali:

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

esempio d'uso:

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

Esempio Risultato: